enchant.js勉強会

8,995 views

Published on

enchant.jsの勉強会の資料

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,995
On SlideShare
0
From Embeds
0
Number of Embeds
2,799
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

enchant.js勉強会

  1. 1. HTML5/JavaScriptゲームエンジン
  2. 2.  enchant.js イントロダクション (15min) サンプル解説 (45min) enchant.js 応用例 (10min) フリータイム (20min)
  3. 3.  HTML5 + JavaScript ベースのゲームエンジン クロスプラットフォーム ◦ Win,Mac,Linux,iOS,Android…etc 豊富なプラグイン MIT/GPLのデュアルライセンス 素材提供も無料
  4. 4.  実際に遊んでみよう。 ◦ http://9leap.net/ Arrows! ◦ 僕が一番最初に作ったもの Arrows! ◦ 製作時間3時間(投稿含め) http://9leap.net/games/38
  5. 5.  enchant.jsを利用したゲームコミュニティサイト ◦ もちろん、enchant.jsを利用しなくても参戦可能 ゲームの投稿型サイトでコンテストがいつもやってる しかも対象者は学生のみ! 優勝するとMacbookがもらえる コンテストは年10回以上?(すでに4回やってる)
  6. 6.  HTML5開発はまだまだ浸透してない enchant.jsが作られてまだ5ヶ月しかたってない 敷居が低い 質より量 優勝するチャンスが高い Macbook(゚д゚)ウマー
  7. 7.  http://9leap.net/games/686 下のソースコードをダウンロードしよう Twitterでのログインが必要 無い人は近くの人からソースコードを貰おう
  8. 8.  高機能テキストエディタで編集しましょう 少なくても、文字コードを変更できるエディタ!!
  9. 9.  index.htmlをブラウザに突っ込 むだけ!! JavaScriptコンソールを表示 ◦ デバッグに利用 ◦ Ctrl+Shift+J で表示 console.log(); 97行目に console.log(score.time); を追記して、動きを確認しよう
  10. 10. 以下の状態にしよう 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(); };
  11. 11.  この状態では何も表示されない 基本的にはこの状態からプログラミングをする
  12. 12.  11行目くらいに書き込んでみる var button = new Sprite(84, 84); button.x = 100; button.y = 100; button.image = game.assets[button.png]; stage.addChild(button); 大文字小文字には注意しよう
  13. 13.  さっき追加した上に書き込んでみる button.addEventListener(touchstart,function(){ button.frame = (button.frame+1)%2; }); enchant.jsはイベントリスナを追加することが出来る この場合は、このオブジェクトがタッチした開始のイベントの時 Object.frameとは読み込ませる分割されたイメージ
  14. 14.  さっき追加したように書き込んでみる button.addEventListener(enterframe, function(e) { button.x += 2; if(button.x>320) button.x = -84; }); フレームが描画されるときのイベント fpsが30ならば、1秒間に30回呼び出される
  15. 15.  function makeButton(x,y)という関数を作る 座標x,yの位置に表示されるようにしてみる var b = makeButton(100,100); stage.addChild(b); 上記のように書いて、先ほどと同じ動きをする関数を 作成してみよう ヒント:元のソースコードに書いてるかも・・・
  16. 16.  正解例 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));
  17. 17.  個数は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設定も可
  18. 18.  毎度おなじみイベントリスナー 今回はstageのリスナー登録 stage.addEventListener(enterframe,function(e) { if(false && クリア条件){ game.end(クリアしました); } }); 上記をそのまま書いても動きます 終了メソッド、game.end(得点,結果コメント); クリア条件を考えて見よう
  19. 19.  すべてのボタンがクリックされたときクリアにする ソースを改良する必要がある 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]); }
  20. 20.  クリア条件を関数化させる function isGoal(){ for(var i=0;i<5;i++){ if(bs[i].frame==0) return false; } return true; } すべてのボタンのフレーム番号が1だったらクリア
  21. 21.  クリア条件に当てはめてみる Stageのイベントリスナーに追加 stage.addEventListener(enterframe,function(e) { if(isGoal()){ game.end(クリアしました); } }); これでゲーム性は一応作られたはず・・・
  22. 22.  こんな画面になればおk 動かないときはJavaScriptコンソールを見よう 関数のスコープ、優先順位には注意
  23. 23.  カメラ、ジャイロなどの端末にアクセス マーカー型AR OpenGLES COLLADA QRコード/バーコード読み取り 10月から提供開始 東京ゲームショウではKARTを使ったAR機能を披露する http://image.itmedia.co.jp/l/im/promobile/articl es/1109/14/l_ys_uei01.jpg
  24. 24.  公式ページ http://enchantjs.com/ja/ ◦ リファレンスが非常に少ない ◦ 公式リファレンスが分かりにくい 人のサンプルをDLして読んだ方が勉強になる 公式ページには無料素材もあるよ
  25. 25.  9日間だけのコンテスト http://wise9.jp/archives/4657 テーマは「パズルゲーム」 優勝作品の作者に「Sony Tablet」 学生のみの参加なので競争率が少ない

×