読了: 約 2 分


最近JavaScriptの勉強をしていて、enchant.jsが気になっていたので
実際に何か作ろうと思ってやってみました。
といっても参考になる方々が沢山いらっしゃいましたので、
詳細はそちらをお読みいただければと思います。

とりあえずの作成フローです。

enchant.jsのダウンロード

まずenchant.jsをダウンロードしましょう。
githubに置いてあるのでここからです。
https://github.com/wise9/enchant.js

作成の流れ

index.htmlの作成

ダウンロード後に『enchant.jsファイル』の置いてある階層に
index.htmlを適当に作成。
外部化して読み込み。

今回は動作をためしてみたかったのでソースをもらって作成

一応ドキュメントを読んだのですが、さくっと作成したかったので、
参考にさせていただきました。

【参考】
F.Ko-Jiの「一秒後は未来」
enchant.jsで「クマたたきゲーム」をつくってみたよ

F.Ko-Jiさんのこの記事が一番参考になりましたので
1つだけ記載させていただきます。ありがとうございました。


【game.js】にあるbear.gifですが、自分はimagesフォルダを作成したので
18行目を

 game.preload('images/chara0.gif');

37行目の画像をspriteしてサイズを決めた後にどの画像を読むかのところで

target.image = game.assets['images/chara0.gif'];

画像なども元々入っているのでchara0に変えたのみで
非常に簡単で、これだけしかやっていません。
できたのがこちら

一応iPhone4sでも動作確認して問題なく動いておりました。
ただ、解像度の問題で画像が少し小さく見えるので、スマートフォン用の画像を作成してあげる必要はあります。
でないと今回の様なタップするゲームだとユーザビリティが良くないですね。
※作ってなくてすみません笑

enchant.jsを使ってこれだけの事が簡単に出来るようになって、
非常に楽しいですよね。楽しみながら作っていくのが、JavaScriptを覚えるのには近道だと思いますし、
またブラッシュアップしていきたいと思います。

関連のサイトとしまして9leapにスマートフォンで遊べる面白いゲームが沢山ありますので
試して見ながら自分で作ってみても面白いんじゃないかと思っています。

また、前回の話題の【Clear】のUIをHTML5・JavaScirptで実現されたのを見ての考察という記事を見てわざわざコメントくださいました、
株式会社ユビキタスエンターテインメント社(enchant.jsを開発している)の清水 亮様に感謝の意を込めた記事でありました。
創ることで感謝を表すのも面白いかなと思った次第です。

githubのwikiを見たらenchant.jsのドキュメントが日本語で書かれていて、何か感動し,
日本でもっと普及して世界に対してスマートフォンで魅せられたら良いなと思い、勝手に応援しております(笑

それではまた。