Fork me on GitHub

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

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

enchantMOONで、Hello World!!と全てのストローク(線)を削除するニフラム!

| Comments

enchantMOONを買ってから、大学で周りからのデバイスに対する羨望の眼差しと批判を浴びながら、ゴニョゴニョと遊び続け、ようやくJavaScriptでシールの作り方が分かってきたこの頃です(^^♪
何を始めるにしても、まずはここからということでですね、enchantMOONを使ってのHello World!!をまず実践します。それと併せて、今回はニフラムを唱えます。

Hello World!!の表示

まず、好きな文字や絵を書きましょう。

enchantMOON-helloworld-01

その後、指で書いた文字や絵を囲みメニューの中から"Link"を選択し、シールにします。リンク先は適当に選んで構いません。
シールにして、もう一度メニューを開き"Hack"を選択します。MOONBlockが起動しますが、何もせずそのまま閉じましょう。

enchantMOON-helloworld-02

次に、PCに接続しましょう。
すると、以下の様なディレクトリ構造をもつシールのIDフォルダができているはずです。

  • hack.js
  • images
    • actiong.png
    • apad.png
    • beach.png
    • black.png
    • blockg.png
    • chara0.png
    • chara1.png
    • chara2.png
    • chara3.png
    • chara4.png
    • chara5.png
    • chara6.png
    • chara7.png
    • clear.png
    • desert.png
    • eclipse.png
    • effect0.gif
    • end.png
    • enemy01.png
    • font0.png
    • hollywood.png
    • icon0.png
    • map2.png
    • pad.png
    • race.png
    • rpg.png
    • sky.png
    • space3.png
    • spacebg.png
    • start.png
    • table.png
  • info.json
  • lib
    • color.enchant.js
    • enchant.js
    • MOON.js
    • moon.puppet.enchant.js
    • puppet.enchant.js
    • stylus.enchant.js
    • ui.enchant.js
  • manifest.json
  • sound
    • se
      • alarm.wav
      • bounce.wav
      • break.wav
      • coin.wav
      • correct.wav
      • explosion.wav
      • gameover.wav
      • incorrect.wav
      • jingle.wav

この中の、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
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の中を変更
            stickertap: function(event) {
              // アラートダイアログを表示
                MOON.alert("Hello World!!", function(){
                  // シールアプリケーションを終了
                    MOON.finish();
                });
            },
            stickerattach: function(event) {
                enchant.puppet.stopTheatre();
            },
            stickerdetach: function(event) {
                enchant.puppet.stopTheatre();
            }
        }]
    });
});

書き換えたら、PCとの接続を切り、enchantMOONに戻ります。
そして、先ほど作ったシールをタップすると、絵が光り出します。

enchantMOON-helloworld-03

すると、Hello World!が表示されます。"OK"をタップすると終了して、シールのページに戻ります。また、三本指でスワイプしても終了します。

enchantMOON-helloworld-04

Hello Worldについては、以上です。

ニフラムを唱える

ここからお遊びです。 ニフラム、皆さんご存知のDQの敵を消す呪文ですね。
ニフラムの如き、ページに書いたストロークを全て消します。

まず、絵や文字を書いて、Hello Worldの時と同じように行い、シールを作りましょう。

enchantMOON-expel-01

PCと接続し、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
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の中を変更
            stickertap: function(event) {
              // シール実行時に画面に表示されているページのデータを取得
                var page = MOON.getCurrentPage();
                var backing = page.backing;
                // シール実行時に画面に表示されているページの持つPaperのデータを取得
                var paperJSON = MOON.getPaperJSON( backing );
                // Paperのデータのストロークを空に
                paperJSON.strokes = [];
                // シール実行時に画面に表示されているページ持つPaperを指定したデータで上書き
                MOON.setPaperJSON( backing, paperJSON );
                enchant.puppet.stopTheatre();
            },
            stickerattach: function(event) {
                enchant.puppet.stopTheatre();
            },
            stickerdetach: function(event) {
                enchant.puppet.stopTheatre();
            }
        }]
    });
});

PCの接続を切り、enchantMOONに戻ります。 すると、スライムが現れても、ニフラムをタップすると…

enchantMOON-expel-02

ニフラムが光り出し、呪文が唱えられ…

enchantMOON-expel-03

消えます!

enchantMOON-expel-04

以上、ニフラムです!

今回は、タップでやりましたが、シールを台帳に登録して、新しいページごとにシールを台帳から取り出して、タップするのは手間だ!っと感じる人もいるでしょう。
その時は、以下のコードのようにstickertapに書いていた処理をstickerattachに書き写してMOON.peel();を足せば、少しはマシになります。
こうすると、シールを台帳から取り出したら、ストロークを消して、一緒にシールも消えます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
stickertap: function(event) {
    enchant.puppet.stopTheatre();
},
stickerattach: function(event) {
    var page = MOON.getCurrentPage();
    var backing = page.backing;
    var paperJSON = MOON.getPaperJSON( backing );
    paperJSON.strokes = [];
    MOON.setPaperJSON( backing, paperJSON );
    // シールをはがす処理
    MOON.peel();
    enchant.puppet.stopTheatre();
},
stickerdetach: function(event) {
    enchant.puppet.stopTheatre();
}

おわりに

Hello Worldとニフラム両方共、とても簡単ですが、何事も最初の一歩は全てここからでしょう(^^)
シンプルであり、重要です!w
現時点でenchantMOONについては、APIのリファレンスはありますが、まだまだ始まったばかりで、ブログ等で参考になるものはまだ全然少ない状態です。
自分のやりたいことに対して、0から作っていかないといけない状態もあるので、正直キツイですが、それでもenchantMOONの開発はなかなか楽しいですw
シールもまだまだ全然ないので、自分の作った何気ない簡単なシールがenchantMOON Bookmarksで人気になるチャンスも高く、色々と開拓のしがいがあるなど夢の持てる状況です。

参考先:

enchantMOON プログラミング入門 02 シールの基礎とHello World
enchantMOON : シールを作ってみました

Comments