enchant.jsの勉強会の資料

1. HTML5/JavaScriptゲームエンジン

2.  enchant.js イントロダクション (15min)
 サンプル解説 (45min)
 enchant.js 応用例 (10min)
 フリータイム (20min)

3.  HTML5 + JavaScript ベースのゲームエンジン
 クロスプラットフォーム
◦ Win,Mac,Linux,iOS,Android…etc
 豊富なプラグイン
 MIT/GPLのデュアルライセンス
 素材提供も無料

4.  実際に遊んでみよう。
◦ http://9leap.net/
 Arrows!
◦ 僕が一番最初に作ったもの
Arrows!
◦ 製作時間3時間(投稿含め) http://9leap.net/games/38

5.  enchant.jsを利用したゲームコミュニティサイト
◦ もちろん、enchant.jsを利用しなくても参戦可能
 ゲームの投稿型サイトでコンテストがいつもやってる
 しかも対象者は学生のみ！
 優勝するとMacbookがもらえる
 コンテストは年10回以上？(すでに４回やってる)

6.  HTML5開発はまだまだ浸透してない
 enchant.jsが作られてまだ5ヶ月しかたってない
 敷居が低い
 質より量
 優勝するチャンスが高い
 Macbook(ﾟдﾟ)ｳﾏｰ

8.  http://9leap.net/games/686
 下のソースコードをダウンロードしよう
 Twitterでのログインが必要
 無い人は近くの人からソースコードを貰おう

9.  高機能テキストエディタで編集しましょう
 少なくても、文字コードを変更できるエディタ！！

10.  index.htmlをブラウザに突っ込
むだけ！！
 JavaScriptコンソールを表示
◦ デバッグに利用
◦ Ctrl+Shift+J で表示
 console.log();
 97行目に
console.log(score.time);
を追記して、動きを確認しよう

11. 以下の状態にしよう
 enchant();
 window.onload = function() {
 var game = new Game(320, 320);
 game.preload('button.png');
 game.fps = 30;
 game.onload = function() {
 var stage = new Group();
 stage.command = true;
 stage.addEventListener('enterframe', function(e) {
 });
 game.rootScene.addChild(stage);
 game.rootScene.backgroundColor = 'rgb(182, 255, 255)';
 };
 game.start();
 };

12.  この状態では何も表示されない
 基本的にはこの状態からプログラミングをする

13.  11行目くらいに書き込んでみる
var button = new Sprite(84, 84);
button.x = 100;
button.y = 100;
button.image = game.assets['button.png'];
stage.addChild(button);
 大文字小文字には注意しよう

14.  さっき追加した上に書き込んでみる
button.addEventListener('touchstart',function(){
button.frame = (button.frame+1)%2;
});
 enchant.jsはイベントリスナを追加することが出来る
 この場合は、このオブジェクトがタッチした開始のイベントの時
 Object.frameとは読み込ませる分割されたイメージ

15.  さっき追加したように書き込んでみる
button.addEventListener('enterframe', function(e) {
button.x += 2;
if(button.x>320) button.x = -84;
});
 フレームが描画されるときのイベント
 fpsが30ならば、1秒間に30回呼び出される

16.  function makeButton(x,y)という関数を作る
 座標x,yの位置に表示されるようにしてみる
var b = makeButton(100,100);
stage.addChild(b);
 上記のように書いて、先ほどと同じ動きをする関数を
作成してみよう
 ヒント：元のソースコードに書いてるかも･･･

17.  正解例 JavaScriptの関数スコープに気をつけよう
function makeButton(x,y){
var button = new Sprite(84, 84);
button.x = x;
button.y = y;
button.image = game.assets['button.png'];
button.addEventListener('touchstart',function(){
button.frame = (button.frame+1)%2;
});
button.addEventListener('enterframe', function(e) {
button.x += 2;
if(button.x>320) button.x = -84;
});
return button;
}
stage.addChild(makeButton(100,100));

18.  個数は5つ、生成場所をランダムにしてみよう
for(var i=0;i<5;i++){
var x = Math.random()*320;
var y = Math.random()*(320 - 84);
var b = makeButton(x,y);
stage.addChild(b);
}
 JavaScriptのランダム関数はMath.random()
 0.0~1.0の範囲の値
 Seed設定も可

19.  毎度おなじみイベントリスナー
 今回はstageのリスナー登録
stage.addEventListener('enterframe',function(e) {
if(false && クリア条件){
game.end('クリアしました');
}
});
 上記をそのまま書いても動きます
 終了メソッド、game.end(得点,結果コメント);
 クリア条件を考えて見よう

20.  すべてのボタンがクリックされたときクリアにする
 ソースを改良する必要がある
var bs = new Array()
for(var i=0;i<5;i++){
var x = Math.random()*320;
var y = Math.random()*(320 - 84);
bs[i] = makeButton(x,y);
stage.addChild(bs[i]);
}

21.  クリア条件を関数化させる
function isGoal(){
for(var i=0;i<5;i++){
if(bs[i].frame==0) return false;
}
return true;
}
 すべてのボタンのフレーム番号が1だったらクリア

22.  クリア条件に当てはめてみる
 Stageのイベントリスナーに追加
stage.addEventListener('enterframe',function(e) {
if(isGoal()){
game.end('クリアしました');
}
});
 これでゲーム性は一応作られたはず･･･

23.  こんな画面になればおｋ
 動かないときはJavaScriptコンソールを見よう
 関数のスコープ、優先順位には注意

25.  カメラ、ジャイロなどの端末にアクセス
 マーカー型AR
 OpenGLES
 COLLADA
 QRコード/バーコード読み取り
 10月から提供開始
東京ゲームショウではKARTを使ったAR機能を披露する
http://image.itmedia.co.jp/l/im/promobile/articl
es/1109/14/l_ys_uei01.jpg

26.  公式ページ http://enchantjs.com/ja/
◦ リファレンスが非常に少ない
◦ 公式リファレンスが分かりにくい
 人のサンプルをDLして読んだ方が勉強になる
 公式ページには無料素材もあるよ

27.  9日間だけのコンテスト
http://wise9.jp/archives/4657
 テーマは「パズルゲーム」
 優勝作品の作者に「Sony Tablet」
 学生のみの参加なので競争率が少ない