Download as PDF, PPTX
![まずはキャラの配置 game.js
var game = new Game(320, 320);
game.fps = 24;
game.preload('chara1.gif');
game.onload = function(){
//キャラクター
var bear = new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];
//rootSceneに追加
game.rootScene.addChild(bear);
}
game.start();
}](https://image.slidesharecdn.com/enchant-js-120722195751-phpapp01/75/enchant-js-10-2048.jpg)
![まずはキャラの配置 game.js
フレームレートの設定
var game = new Game(320, 320);
game.fps = 24; 画像のプリロード
game.preload('chara1.gif');
game.onload = function(){ スプライトの生成
//キャラクター
var bear = new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];
//rootSceneに追加
game.rootScene.addChild(bear); 画像の指定
}
game.start();
※ルートシーンに追加
}](https://image.slidesharecdn.com/enchant-js-120722195751-phpapp01/75/enchant-js-11-2048.jpg)
![ステージを配置する
//MAPを表示させる
var blocks = [
[ -1, -1,//省略// -1, -1, -1, -1 ],
////////////////省略/////////////////////
[ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ],
[ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ]
];
var map = new Map(16, 16);
map.image = game.assets["map2.gif"];
map.loadData(blocks);](https://image.slidesharecdn.com/enchant-js-120722195751-phpapp01/75/enchant-js-16-2048.jpg)
![ステージを配置する 配列で表示する画像を管
理
//MAPを表示させる
var blocks = [ タイルの一コマづつ敷き
[ -1, -1,//省略// -1, -1, -1, -1 ], 詰めるように配置。
////////////////省略/////////////////////
[ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ],
[ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ]
];
var map = new Map(16, 16);
map.image = game.assets["map2.gif"];
map.loadData(blocks);](https://image.slidesharecdn.com/enchant-js-120722195751-phpapp01/75/enchant-js-17-2048.jpg)
![ステージを配置する
//MAPを表示させる
var blocks = [
[ -1, -1,//省略// -1, -1, -1, -1 ],
////////////////省略/////////////////////
Map(オブジェクト)を生成
[ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ],
[ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ]
]; 画像の指定
var map = new Map(16, 16);
map.image = game.assets["map2.gif"];
map.loadData(blocks);
配列を呼び出し配置](https://image.slidesharecdn.com/enchant-js-120722195751-phpapp01/75/enchant-js-18-2048.jpg)
![当たり判定
//星を表示
var star = new Sprite(16, 16);
star.image = game.assets['icon0.gif'];
//-------------------省略--------------------//
//星との当たり判定
if(this.within(star, 15)) {
label.text = '当たった！';
this.frame = 3;
}](https://image.slidesharecdn.com/enchant-js-120722195751-phpapp01/75/enchant-js-20-2048.jpg)
![当たり判定 キャラを一つ追加
//星を表示
var star = new Sprite(16, 16);
star.image = game.assets['icon0.gif'];
//-------------------省略--------------------//
//星との当たり判定
if(this.within(star, 15)) {
label.text = '当たった！';
this.frame = 3;
}](https://image.slidesharecdn.com/enchant-js-120722195751-phpapp01/75/enchant-js-21-2048.jpg)
![当たり判定
//星を表示
var star = new Sprite(16, 16);
star.image = game.assets['icon0.gif'];
//-------------------省略--------------------//
当たり判定の処理
//星との当たり判定
if(this.within(star, 15)) { intersect,またはwithin
label.text = '当たった！'; メソッドを利用。
this.frame = 3;
}](https://image.slidesharecdn.com/enchant-js-120722195751-phpapp01/75/enchant-js-22-2048.jpg)
enchant.jsでゲーム制作をはじめてみよう
- 1. enchant.jsでゲーム制作を はじめてみよう 2012.7.21 第5回 HTML5など勉強会 Ryota Shiroguchi
- 2. 私について ● @3panda ● 仕事はHTMLとかCSS触ってます。 ●プログラムは 苦手です； ● 「パンダの会」の主催 次回は9/15（土）!! ● パンダが大好きです。
- 3. enchant.jsとは ● ゲームエンジン ● HTML5+ JavaScript ● クロスプラットフォーム ● 日本製（株式会社ユビキタスエンターテインメントが公開）
- 4. enchant.jsの良いところ ● スタートアップが楽ちん ● サンプルが豊富 ●ドキュメントが日本語 ● 公式のプラグインも豊富
- 5. スタートアップ HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>enchant</title> <script type="text/javascript" src="enchant.js"></script> <script type="text/javascript" src="game.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> </body> </html>
- 6. スタートアップ HTML <!DOCTYPE html> <html> <head> enchant.js を読み込む <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>enchant</title> <script type="text/javascript" src="enchant.js"></script> <script type="text/javascript" src="game.js"></script> <style type="text/css"> body { margin: 0; } </style> 実行用jsファイル を読み込む。 ※ </head> <body> HTMLに直接記述も可能。 </body> </html> ※今回はgame.jsとしていますが何でもOK
- 7. スタートアップ game.js enchant(); window.onload=function(){ var game =new Game(320, 320); //ここで初期化 game.onload = function(){ //ここにゲーム処理を書く } game.start(); }
- 8. スタートアップ game.js enchantのお約束！ enchant(); JavaScriptのお約束！ window.onload=function(){ var game = new Game(320, 320); //ここで初期化 game.onload = function(){ //ここにゲーム処理を書く } game.start(); }
- 9. スタートアップ game.js ゲーム(オブジェクト)を生成 enchant(); window.onload=function(){ var game = new Game(320, 320); //ここで初期化 game.onload = function(){ //ここにゲーム処理を書く ゲーム中の処理 } game.start(); } ゲームをスタート！
- 10. まずはキャラの配置 game.js var game =new Game(320, 320); game.fps = 24; game.preload('chara1.gif'); game.onload = function(){ //キャラクター var bear = new Sprite(32, 32); bear.image = game.assets['chara1.gif']; //rootSceneに追加 game.rootScene.addChild(bear); } game.start(); }
- 11. まずはキャラの配置 game.js フレームレートの設定 var game = new Game(320, 320); game.fps = 24; 画像のプリロード game.preload('chara1.gif'); game.onload = function(){ スプライトの生成 //キャラクター var bear = new Sprite(32, 32); bear.image = game.assets['chara1.gif']; //rootSceneに追加 game.rootScene.addChild(bear); 画像の指定 } game.start(); ※ルートシーンに追加 }
- 12.
- 13. キャラを動かす //bearの動きの設定 イベントはフレーム毎 bear.addEventListener(Event.ENTER_FRAME, function() { //左 if (game.input.left) { this.x -= 3; this.scaleX = -1; } //・・・省略・・・ });
- 14. キャラを動かす キャラにイベントリスナーを追加 //bearの動きの設定 イベントはフレーム毎 bear.addEventListener(Event.ENTER_FRAME, function() { //左 if (game.input.left) { this.x -= 3; this.scaleX = -1; } //・・・省略・・・ });
- 15. キャラを動かす //bearの動きの設定 イベントはフレーム毎 bear.addEventListener(Event.ENTER_FRAME, function() { //左 if (game.input.left) { イベントはフレーム毎 this.x -= 3; this.scaleX = -1; } //・・・省略・・・ });
- 16. ステージを配置する //MAPを表示させる var blocks =[ [ -1, -1,//省略// -1, -1, -1, -1 ], ////////////////省略///////////////////// [ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ], [ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ] ]; var map = new Map(16, 16); map.image = game.assets["map2.gif"]; map.loadData(blocks);
- 17. ステージを配置する 配列で表示する画像を管 理 //MAPを表示させる var blocks = [ タイルの一コマづつ敷き [ -1, -1,//省略// -1, -1, -1, -1 ], 詰めるように配置。 ////////////////省略///////////////////// [ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ], [ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ] ]; var map = new Map(16, 16); map.image = game.assets["map2.gif"]; map.loadData(blocks);
- 18. ステージを配置する //MAPを表示させる var blocks =[ [ -1, -1,//省略// -1, -1, -1, -1 ], ////////////////省略///////////////////// Map(オブジェクト)を生成 [ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ], [ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ] ]; 画像の指定 var map = new Map(16, 16); map.image = game.assets["map2.gif"]; map.loadData(blocks); 配列を呼び出し配置
- 19. ステージを配置する game.onload = function(){ //---------------省略-------------------// //rootSceneに追加 game.rootScene.addChild(bear); game.rootScene.addChild(map); } ※ルートシーンに追加 game.start(); } ※オブジェクトは シーンに追加する事で表示
- 20. 当たり判定 //星を表示 var star =new Sprite(16, 16); star.image = game.assets['icon0.gif']; //-------------------省略--------------------// //星との当たり判定 if(this.within(star, 15)) { label.text = '当たった！'; this.frame = 3; }
- 21. 当たり判定 キャラを一つ追加 //星を表示 var star = new Sprite(16, 16); star.image = game.assets['icon0.gif']; //-------------------省略--------------------// //星との当たり判定 if(this.within(star, 15)) { label.text = '当たった！'; this.frame = 3; }
- 22. 当たり判定 //星を表示 var star =new Sprite(16, 16); star.image = game.assets['icon0.gif']; //-------------------省略--------------------// 当たり判定の処理 //星との当たり判定 if(this.within(star, 15)) { intersect,またはwithin label.text = '当たった！'; メソッドを利用。 this.frame = 3; }
- 23.
- 24.
- 25.
- 26.
- 27. その他プラグイン（サンプル紹介） ● tl.enchant.js（アニメーション） ● gl.enchant.js（WebGL） ● widget.enchant.js(インターフェイス)※ ※現在未発表の為、サンプルはありません
- 28. さらに詳しい解説は ● 公式サイトのサンプルコード ● code9leap ●ドットインストール ● enchant.js プログラミング入門の資料 ● tl.enchant.jsの解説
- 29. まとめ ● やっぱり簡単 ● プログラムの勉強にも ●ゲーム開発の需要の予感も
- 30. まとめ ● やっぱり簡単 ● プログラムの勉強にも ●ゲーム開発の需要の予感も ・・・でも結局のところ言いたい事は
- 31.
- 32.