Suche senden
Hochladen
enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
•
2 gefällt mir
•
2,297 views
Ryota Shiroguchi
Folgen
Melden
Teilen
Melden
Teilen
1 von 60
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
nico0927
enchant.js meetup Tokyo vol.2 Tutorial
enchant.js meetup Tokyo vol.2 Tutorial
Ryo Shimizu
Hibernate
Hibernate
Sunil OS
WebGL and three.js
WebGL and three.js
Anton Narusberg
Three.js basics
Three.js basics
Vasilika Klimova
Dom JavaScript
Dom JavaScript
Jorge García C.
Nuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
jQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
Empfohlen
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
nico0927
enchant.js meetup Tokyo vol.2 Tutorial
enchant.js meetup Tokyo vol.2 Tutorial
Ryo Shimizu
Hibernate
Hibernate
Sunil OS
WebGL and three.js
WebGL and three.js
Anton Narusberg
Three.js basics
Three.js basics
Vasilika Klimova
Dom JavaScript
Dom JavaScript
Jorge García C.
Nuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
jQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
Object Oriented CSS
Object Oriented CSS
Nicole Sullivan
What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivan
CMake best practices
CMake best practices
Henry Schreiner
Webpack slides
Webpack slides
Андрей Вандакуров
Dom
Dom
Surinder Kaur
An Overview on Nuxt.js
An Overview on Nuxt.js
Squash Apps Pvt Ltd
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
Timings of Init : Android Ramdisks for the Practical Hacker
Timings of Init : Android Ramdisks for the Practical Hacker
Stacy Devino
Html5
Html5
Tony Nguyen
From printk to QEMU: Xen/Linux Kernel debugging
From printk to QEMU: Xen/Linux Kernel debugging
The Linux Foundation
Html
Html
Mallikarjuna G D
AEM Sightly Template Language
AEM Sightly Template Language
Gabriel Walt
Formation GIT gratuite par ippon 2014
Formation GIT gratuite par ippon 2014
Ippon
Intro to Three.js
Intro to Three.js
Kentucky JavaScript Users Group
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish M
The benefits of BEM CSS
The benefits of BEM CSS
Bob Donderwinkel
Introduction to CSS
Introduction to CSS
Prarthan P
Kiss PageObjects [01-2017]
Kiss PageObjects [01-2017]
Iakiv Kramarenko
Java 8 - CJ
Java 8 - CJ
Sunil OS
An Introduction to CMake
An Introduction to CMake
ICS
enchant.jsでゲーム制作をはじめてみよう
enchant.jsでゲーム制作をはじめてみよう
Ryota Shiroguchi
Osakijs #01 「enchant.jsハンズオン資料」
Osakijs #01 「enchant.jsハンズオン資料」
Yusuke HIDESHIMA
Weitere ähnliche Inhalte
Was ist angesagt?
Object Oriented CSS
Object Oriented CSS
Nicole Sullivan
What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivan
CMake best practices
CMake best practices
Henry Schreiner
Webpack slides
Webpack slides
Андрей Вандакуров
Dom
Dom
Surinder Kaur
An Overview on Nuxt.js
An Overview on Nuxt.js
Squash Apps Pvt Ltd
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
Timings of Init : Android Ramdisks for the Practical Hacker
Timings of Init : Android Ramdisks for the Practical Hacker
Stacy Devino
Html5
Html5
Tony Nguyen
From printk to QEMU: Xen/Linux Kernel debugging
From printk to QEMU: Xen/Linux Kernel debugging
The Linux Foundation
Html
Html
Mallikarjuna G D
AEM Sightly Template Language
AEM Sightly Template Language
Gabriel Walt
Formation GIT gratuite par ippon 2014
Formation GIT gratuite par ippon 2014
Ippon
Intro to Three.js
Intro to Three.js
Kentucky JavaScript Users Group
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish M
The benefits of BEM CSS
The benefits of BEM CSS
Bob Donderwinkel
Introduction to CSS
Introduction to CSS
Prarthan P
Kiss PageObjects [01-2017]
Kiss PageObjects [01-2017]
Iakiv Kramarenko
Java 8 - CJ
Java 8 - CJ
Sunil OS
An Introduction to CMake
An Introduction to CMake
ICS
Was ist angesagt?
(20)
Object Oriented CSS
Object Oriented CSS
What is Object Oriented CSS?
What is Object Oriented CSS?
CMake best practices
CMake best practices
Webpack slides
Webpack slides
Dom
Dom
An Overview on Nuxt.js
An Overview on Nuxt.js
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Timings of Init : Android Ramdisks for the Practical Hacker
Timings of Init : Android Ramdisks for the Practical Hacker
Html5
Html5
From printk to QEMU: Xen/Linux Kernel debugging
From printk to QEMU: Xen/Linux Kernel debugging
Html
Html
AEM Sightly Template Language
AEM Sightly Template Language
Formation GIT gratuite par ippon 2014
Formation GIT gratuite par ippon 2014
Intro to Three.js
Intro to Three.js
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
The benefits of BEM CSS
The benefits of BEM CSS
Introduction to CSS
Introduction to CSS
Kiss PageObjects [01-2017]
Kiss PageObjects [01-2017]
Java 8 - CJ
Java 8 - CJ
An Introduction to CMake
An Introduction to CMake
Ähnlich wie 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
Ähnlich wie 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ベースゲームエンジン徹底比較
Jetzt herunterladen