Fork me on GitHub

役立ちぬ開発史、それはただのブログ

覚えておくといい、ブログの時代は終わる。いつかその内、きっとたぶん…

enchantMOONで、グリッドを描くシールを作って遊んでみた!

| Comments

enchantMOONで、方眼紙みたいにマス目を描くシールを作りました。マスの大きさを変えると色んなことに使えて便利です。この作ったシールで遊んでみました。

グリッドシールの作成

今回は、格子状に線を描きます。

enchantMOON-grid-01

hack.jsは、以下のように書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
importJS(["lib/MOON.js", "lib/enchant.js", "lib/ui.enchant.js", "lib/color.enchant.js", "lib/stylus.enchant.js", "lib/puppet.enchant.js", "lib/moon.puppet.enchant.js"], function() {
    enchant();
    enchant.puppet.prepareTheatre({
        assets: []
    });
    StickerPuppet.create("シール", {
        behavior: [{
            stickertap: function(event) {
                var page = MOON.getCurrentPage();
                var backing = page.backing;
                var paperJSON = MOON.getPaperJSON(backing);

                // 描画する領域設定
                var paperWidth = paperJSON.width;
                var paperHeight = 900;

                // 描画する線の設定
                var lineStrokes = [];
                var lineSpacing_x = 150;
                var lineSpacing_y = 128;
                var p = 1.0;
                var lineWidth = 4;

                //横線の描画
                for(var i = 1; i <= paperHeight / lineSpacing_x; i++){
                var y = i * lineSpacing_x;
                lineStrokes.push({width:lineWidth,
                                  color: -1,
                                  type:"pen",
                                  data:[
                                    0, y, p,
                                    paperWidth, y, p
                                  ]});
                }
                //縦線の描画
                for(var i = 1; i <= paperWidth / lineSpacing_y; i++){
                var x = i * lineSpacing_y;
                lineStrokes.push({width:lineWidth,
                                  color: -1,
                                  type:"pen",
                                  data:[
                                    x, 0, p,
                                    x, paperHeight, p
                                  ]});
                }
                //lineStrokesを追加
                paperJSON.strokes = paperJSON.strokes.concat(lineStrokes);
                //追加したlineStrokesを反映
                MOON.setPaperJSON(backing,paperJSON);

                enchant.puppet.stopTheatre();
            },
            stickerattach: function(event) {
                enchant.puppet.stopTheatre();
            },
            stickerdetach: function(event) {
                enchant.puppet.stopTheatre();
            }
        }]
    });
});

ネコの襲来

今回のシールは、単にマス目を作るだけではなく、ネコが現れた時にも役立ちます。

enchantMOON-grid-02

1匹ならカワイイものですが、大量に現れたら、たまったもんじゃありません。

enchantMOON-grid-03

そんなときは、先ほどつくったシールを使って

enchantMOON-grid-04

ネコを檻にの中にいれることができます。
enchantMOONで、いつ大量のネコに遭遇しても大丈夫です!

enchantMOON-grid-05

この檻に入ったネコが邪魔なときは、前回作ったニフラムで消してしまいましょう。

参考先:

enchantMOON プログラミング入門 03 MOONBlock入門とグリッドシールの作成

Comments