FUSE 01 直前特集 2/3 enchant.js はじめのいっぽ

はい! @ricktsukidaです。

怒涛のFUSE事前講座第二弾「enchant.js はじめのいっぽ」になります。

もしenchant.jsをいれてないよ、という人がいたなら、enchantjs.comへアクセスして、左側のDownloadからenchant.jsを手に入れて下さい。

今回は、enchant.jsの基礎から説明していきます。
といっても実は、wise9という本家本元のサイトがあります。そちらのサイトを参考にすると早いかも。

…では身も蓋もないので、早速前回のpre FUSEで使用されたゲームです。

http://9leap.net/games/2552/

遊んでみてダウンロードしてみて ソースを見てみましょう。

クマが芋虫を踏んづけるとポイントが加算されるゲームです。

ちなみに踏んだ数だけ芋虫の速度が上がるようになっています。

コメントアウトで解説しているのでじっくり読めばきっと理解できます。

もしわからないクラスがあったらココを開いてみてください

http://wise9.github.com/enchant.js/doc/core/ja/index.html

SpriteやSurface、addEventListenerっていうのはどういったものなのか、詳しく書いてあります。

このコードを見てわかったかと思いますが、enchant.jsを使う基本は、次のような流れになります(わからなければ、もっかいじっくりソースコードを読んでみて!)。

Spriteなどのクラスを使ってインスタンスをつくる。
(インスタンスとはクラスという設計図を使って実際につくったモノのこと)

さきほどつくったインスタンスに画像や座標などを入れて形つくっていく
(var bear = new Spriteの場合には、bear.image = 画像ファイル。これでクマインスタンスに画像が入った!)

インスタンスに情報を入れたら、addChildを使って画面に表示
( addChild(bear) この()にインスタンス名をいれればOK!)

これだけで画像が表示されちゃう!

あとはEventListenerという枠の中に、キャラの操作やアニメーションを書き込んでいくだけで簡単にゲームっぽいのができちゃいます。

ちょっと乱暴な言い方ですが 本当にそうです。

詳しい解説は

http://enchantjs.com/ja/reference.html#ref_5

こちらの逆引きリファレンスに詳しい解説がのっていますので是非チェックしてみてください。

強引に飛ばしてきましたが最後に理解するための早道は。

先ほどのゲームのソースをいじってみるといいです。

ここの数値を変えるとどうなるか? ここをコメントアウトにしてみると?? などといった感じでそれで表示される画面や吐き出されるエラーと1時間にらめっこしてみれば、初めてでもすぐに理解できるようになるはず。

では次は FUSEの最終目的 9leapに投稿 でも、9leapって? という人のために

「What’s 9leap.」
を特集します。 では!

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中