Enviar pesquisa
Carregar
enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
•
2 gostaram
•
2,297 visualizações
Ryota Shiroguchi
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 60
Baixar agora
Baixar para ler offline
Recomendados
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
nico0927
enchant.js meetup Tokyo vol.2 Tutorial
enchant.js meetup Tokyo vol.2 Tutorial
Ryo Shimizu
Bra
Bra
venkatesha9
Atta pooku mettana
Atta pooku mettana
venkatesha9
Collector 01
Collector 01
venkatesha9
Aunty help
Aunty help
venkatesha9
Snehapoorvam Amma
Snehapoorvam Amma
rvkara
025 kamala
025 kamala
Hari99
Recomendados
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
nico0927
enchant.js meetup Tokyo vol.2 Tutorial
enchant.js meetup Tokyo vol.2 Tutorial
Ryo Shimizu
Bra
Bra
venkatesha9
Atta pooku mettana
Atta pooku mettana
venkatesha9
Collector 01
Collector 01
venkatesha9
Aunty help
Aunty help
venkatesha9
Snehapoorvam Amma
Snehapoorvam Amma
rvkara
025 kamala
025 kamala
Hari99
Bhaarya akkato
Bhaarya akkato
venkatesha9
Anna bhaaryato
Anna bhaaryato
venkatesha9
025 cinema effect
025 cinema effect
Hari99
Dondoo dondae
Dondoo dondae
venkatesha9
Gameplay and game mechanic design
Gameplay and game mechanic design
missstevenson01
Sogasu
Sogasu
onlytelugustories
Doola dampatulu-01-04
Doola dampatulu-01-04
venkatesha9
Bhanumati attagaru
Bhanumati attagaru
venkatesha9
025 discussion
025 discussion
Hari99
методика
методика
ltasenko
025 kantam
025 kantam
Hari99
025 aunty help
025 aunty help
Hari99
025 bra
025 bra
Hari99
επαναληψη ως το κκ
επαναληψη ως το κκ
Ioanna Chats
Making a Game Design Document
Making a Game Design Document
Equal Experts
Disco shanti
Disco shanti
venkatesha9
Attaa maamalu-01-02
Attaa maamalu-01-02
venkatesha9
Chiktlo sandadi
Chiktlo sandadi
venkatesha9
Docker Plugin For DevSecOps
Docker Plugin For DevSecOps
Pichaya Morimoto
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
Önder Ceylan
enchant.jsでゲーム制作をはじめてみよう
enchant.jsでゲーム制作をはじめてみよう
Ryota Shiroguchi
Osakijs #01 「enchant.jsハンズオン資料」
Osakijs #01 「enchant.jsハンズオン資料」
Yusuke HIDESHIMA
Mais conteúdo relacionado
Mais procurados
Bhaarya akkato
Bhaarya akkato
venkatesha9
Anna bhaaryato
Anna bhaaryato
venkatesha9
025 cinema effect
025 cinema effect
Hari99
Dondoo dondae
Dondoo dondae
venkatesha9
Gameplay and game mechanic design
Gameplay and game mechanic design
missstevenson01
Sogasu
Sogasu
onlytelugustories
Doola dampatulu-01-04
Doola dampatulu-01-04
venkatesha9
Bhanumati attagaru
Bhanumati attagaru
venkatesha9
025 discussion
025 discussion
Hari99
методика
методика
ltasenko
025 kantam
025 kantam
Hari99
025 aunty help
025 aunty help
Hari99
025 bra
025 bra
Hari99
επαναληψη ως το κκ
επαναληψη ως το κκ
Ioanna Chats
Making a Game Design Document
Making a Game Design Document
Equal Experts
Disco shanti
Disco shanti
venkatesha9
Attaa maamalu-01-02
Attaa maamalu-01-02
venkatesha9
Chiktlo sandadi
Chiktlo sandadi
venkatesha9
Docker Plugin For DevSecOps
Docker Plugin For DevSecOps
Pichaya Morimoto
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
Önder Ceylan
Mais procurados
(20)
Bhaarya akkato
Bhaarya akkato
Anna bhaaryato
Anna bhaaryato
025 cinema effect
025 cinema effect
Dondoo dondae
Dondoo dondae
Gameplay and game mechanic design
Gameplay and game mechanic design
Sogasu
Sogasu
Doola dampatulu-01-04
Doola dampatulu-01-04
Bhanumati attagaru
Bhanumati attagaru
025 discussion
025 discussion
методика
методика
025 kantam
025 kantam
025 aunty help
025 aunty help
025 bra
025 bra
επαναληψη ως το κκ
επαναληψη ως το κκ
Making a Game Design Document
Making a Game Design Document
Disco shanti
Disco shanti
Attaa maamalu-01-02
Attaa maamalu-01-02
Chiktlo sandadi
Chiktlo sandadi
Docker Plugin For DevSecOps
Docker Plugin For DevSecOps
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
Semelhante a enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
enchant.jsでゲーム制作をはじめてみよう
enchant.jsでゲーム制作をはじめてみよう
Ryota Shiroguchi
Osakijs #01 「enchant.jsハンズオン資料」
Osakijs #01 「enchant.jsハンズオン資料」
Yusuke HIDESHIMA
2012 03-03-titanium plusquicktigame2d
2012 03-03-titanium plusquicktigame2d
Hiroshi Oyamada
Creators'night#14今井
Creators'night#14今井
Daisuke Imai
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
Yohei Munesada
Canvas de shooting 制作のポイント
Canvas de shooting 制作のポイント
Yohei Munesada
Creators'night#12今井
Creators'night#12今井
Daisuke Imai
Processing workshop v3.0
Processing workshop v3.0
Wataru Kani
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜
勝成 鈴江
Processing workshop
Processing workshop
Wataru Kani
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Tomoaki Shimizu
Arctic.js
Arctic.js
chikathreesix
enchant.js勉強会
enchant.js勉強会
Hiroaki Murayama
Siv3Dで楽しむゲームとメディアアート開発
Siv3Dで楽しむゲームとメディアアート開発
Ryo Suzuki
Androidプログラミング初心者のためのゲームアプリ開発入門
Androidプログラミング初心者のためのゲームアプリ開発入門
Masahiko Mizuta
PF部2011年12月勉強会.androidsola
PF部2011年12月勉強会.androidsola
android sola
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
android sola
Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう
Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう
keroyonn
どこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティス
5mingame2
Designing video game hardware in verilog
Designing video game hardware in verilog
Atsuki Takahashi
Semelhante a enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
(20)
enchant.jsでゲーム制作をはじめてみよう
enchant.jsでゲーム制作をはじめてみよう
Osakijs #01 「enchant.jsハンズオン資料」
Osakijs #01 「enchant.jsハンズオン資料」
2012 03-03-titanium plusquicktigame2d
2012 03-03-titanium plusquicktigame2d
Creators'night#14今井
Creators'night#14今井
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
Canvas de shooting 制作のポイント
Canvas de shooting 制作のポイント
Creators'night#12今井
Creators'night#12今井
Processing workshop v3.0
Processing workshop v3.0
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜
Processing workshop
Processing workshop
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Arctic.js
Arctic.js
enchant.js勉強会
enchant.js勉強会
Siv3Dで楽しむゲームとメディアアート開発
Siv3Dで楽しむゲームとメディアアート開発
Androidプログラミング初心者のためのゲームアプリ開発入門
Androidプログラミング初心者のためのゲームアプリ開発入門
PF部2011年12月勉強会.androidsola
PF部2011年12月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう
Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう
どこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティス
Designing video game hardware in verilog
Designing video game hardware in verilog
enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
1.
enchant.jsでゲーム制作を
はじめてみよう 「パンダの会」バージョン 2012.9.15 「パンダの会」 その七 3panda(Ryota Shiroguchi)
2.
私について ● @3panda ● 仕事はHTMLとかCSS触ってます。 ●
プログラムは 苦手です。 ● ファミコン世代です。 ● パンダが大好きです。
3.
このお話の流れ ● enchant.jsについて ● スタートアップ ●
ゲーム的な動きをつくる(デモ&解説) ● ゲームを作ってみました! ● まとめ
4.
enchant.jsについて
5.
enchant.jsとは ● ゲームエンジン ● HTML5
+ JavaScript ● クロスプラットフォーム ● 日本製(株式会社ユビキタスエンターテインメントが公開)
6.
enchant.jsの良いところ ● スタートアップが楽ちん ● サンプルが豊富 ●
ドキュメントが日本語 ● 公式のプラグインも豊富
7.
スタートアップ
8.
スタートアップ 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>
9.
スタートアップ 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
10.
スタートアップ game.js enchant(); window.onload=function(){ var game =
new Game(320, 320); //ここで初期化 game.onload = function(){ //ここにゲーム処理を書く } game.start(); }
11.
スタートアップ game.js
enchantのお約束! enchant(); JavaScriptのお約束! window.onload=function(){ var game = new Game(320, 320); //ここで初期化 game.onload = function(){ //ここにゲーム処理を書く } game.start(); }
12.
スタートアップ game.js
ゲーム(オブジェクト)を生成 enchant(); window.onload=function(){ var game = new Game(320, 320); //ここで初期化 game.onload = function(){ //ここにゲーム処理を書く ゲーム中の処理 } game.start(); } ゲームをスタート!
13.
ゲーム的な動きをつくる
14.
ゲーム的な動きを作る ● まずはキャラの配置 ● キャラを動かす ●
ステージを配置する ● 当たり判定 ● ゲームスタート&ゲームオーバー ● コントローラーの設置(タッチデバイス用)
15.
まずはキャラの配置
クマさん
16.
まずはキャラの配置 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(); }
17.
まずはキャラの配置 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(); ※ルートシーンに追加 }
18.
デモ
19.
キャラを動かす
クマさん走る
20.
キャラを動かす //bearの動きの設定 イベントはフレーム毎 bear.addEventListener(Event.ENTER_FRAME, function() {
//左 if (game.input.left) { this.x -= 3; this.scaleX = -1; } //・・・省略・・・ });
21.
キャラを動かす
キャラにイベントリスナーを追加 //bearの動きの設定 イベントはフレーム毎 bear.addEventListener(Event.ENTER_FRAME, function() { //左 if (game.input.left) { this.x -= 3; this.scaleX = -1; } //・・・省略・・・ });
22.
キャラを動かす //bearの動きの設定 イベントはフレーム毎 bear.addEventListener(Event.ENTER_FRAME, function() {
//左 if (game.input.left) { イベントはフレーム毎 this.x -= 3; this.scaleX = -1; } //・・・省略・・・ });
23.
デモ
24.
ステージを配置する
25.
ステージを配置する //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);
26.
ステージを配置する
配列で表示する画像を管 理 //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);
27.
ステージを配置する //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); 配列を呼び出し配置
28.
ステージを配置する
map2.gif
29.
ステージを配置する
生成したオブジェクトのサイズで 配列として扱える
30.
ステージを配置する game.onload = function(){
//---------------省略-------------------// //rootSceneに追加 game.rootScene.addChild(bear); game.rootScene.addChild(map); } ※ルートシーンに追加 game.start(); } ※オブジェクトは シーンに追加する事で表示
31.
デモ
32.
実はクマさんも・・・
chara1.gif
33.
実はクマさんも・・・
サイズ(32,32) 「chara1.gif」を切り出して 呼び出している
34.
実はクマさんも・・・
デフォルトは0(1番目) 「bear.frame = 番号」 で何番目を表示するか指定する。
35.
当たり判定
当たった!!!
36.
当たり判定 //星を表示 var star =
new Sprite(16, 16); star.image = game.assets['icon0.gif']; star.frame = [30]; //-------------------省略--------------------// //星との当たり判定 if(this.within(star, 15)) { label.text = '当たった!'; this.frame = 3; }
37.
当たり判定
キャラを一つ追加 //星を表示 var star = new Sprite(16, 16); star.image = game.assets['icon0.gif']; star.frame = [30]; //-------------------省略--------------------// //星との当たり判定 if(this.within(star, 15)) { label.text = '当たった!'; this.frame = 3; }
38.
当たり判定 //星を表示 var star =
new Sprite(16, 16); star.image = game.assets['icon0.gif']; 当たり判定の処理 star.frame = [30]; intersect,またはwithin メソッドを利用。※ //-------------------省略--------------------// //星との当たり判定 if(this.within(star, 15)) { ※補足 label.text = '当たった!'; ・intersec()では矩形同士の距離 ・within()では中心からの距離 this.frame = 3; }
39.
デモ
40.
ゲームスタート&ゲームオーバー
41.
ゲームスタート&ゲームオーバー
ゲームスタートとゲームオーバーの 画像を用意
42.
ゲームスタート&ゲームオーバー
(注意)HTMLファイルと同じ階層に 置きましょう。
43.
ゲームスタート&ゲームオーバー
ゲームスタートは画像を 用意するだけでOK
44.
ゲームスタート&ゲームオーバー HTML <html> //-------------------省略--------------------// <head> <script type="text/javascript" src="enchant.js"></script> <script
type="text/javascript" src="nineleap.enchant.js"></script> <script type="text/javascript" src="game.js"></script> //-------------------省略--------------------// </html> nineleap.enchant.jsを読み込む
45.
ゲームスタート&ゲームオーバー //星を表示 var star =
new Sprite(16, 16); star.image = game.assets['icon0.gif']; //-------------------省略--------------------// //星との当たり判定 if(this.within(star, 15)) { ゲームオーバーの this.frame = 3; 処理 game.end(); }
46.
デモ
47.
コントローラーの設置(タッチデバイス用)
48.
コントローラーの設置(タッチデバイス用)
pad.png
49.
コントローラーの設置(タッチデバイス用)
(注意)HTMLファイルと同じ階層に 置きましょう。
50.
コントローラーの設置(タッチデバイス用) <html> //-------------------省略--------------------// <head> <script type="text/javascript" src="enchant.js"></script> <script
type="text/javascript" src="ui.enchant.js"></script> <script type="text/javascript" src="game.js"></script> //-------------------省略--------------------// </html> ui.enchant.jsを読み込む
51.
コントローラーの設置(タッチデバイス用) game.onload = function()
{ //-------------------省略--------------------// // バーチャルキーパッドを生成 バーチャルキーパッドを生 var pad = new Pad(); 成 pad.moveTo(0, 220); //-------------------省略--------------------//
52.
コントローラーの設置(タッチデバイス用) game.onload = function()
{ //-------------------省略--------------------// // バーチャルキーパッドを生成 var pad = new Pad(); pad.moveTo(0, 220); //-------------------省略--------------------// バーチャルキーパッドを配 置
53.
デモ
54.
ゲームを作って みました!
55.
デモ
56.
なんとかゲーム が
ぽいもの 出来ました!
57.
まとめ
58.
まとめ ● スタートアップがらくちん ● 必要なものがそろっている ●
少ないコードでゲームが作れる ● プログラムの学習にも最適
59.
ありがとうございました
60.
さらに詳しい解説は ● 公式サイトのサンプルコード ● code9leap ●
ドットインストール ● enchant.js プログラミング入門の資料 ● tl.enchant.jsの解説 ● JavaScriptベースゲームエンジン徹底比較
Baixar agora