enchant.jsでゲーム制作を   はじめてみよう         「パンダの会」バージョン        2012.9.15     「パンダの会」 その七   3panda(Ryota Shiroguchi)
私について● @3panda● 仕事はHTMLとかCSS触ってます。● プログラムは 苦手です。● ファミコン世代です。● パンダが大好きです。
このお話の流れ● enchant.jsについて● スタートアップ● ゲーム的な動きをつくる(デモ&解説)● ゲームを作ってみました!● まとめ
enchant.jsについて
enchant.jsとは● ゲームエンジン● HTML5 + JavaScript● クロスプラットフォーム● 日本製(株式会社ユビキタスエンターテインメントが公開)
enchant.jsの良いところ● スタートアップが楽ちん● サンプルが豊富● ドキュメントが日本語● 公式のプラグインも豊富
スタートアップ
スタートアップ HTML<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, ...
スタートアップ HTML<!DOCTYPE html><html>  <head>                                              enchant.js          を読み込む    <meta ...
スタートアップ game.jsenchant();window.onload=function(){ var game = new Game(320, 320);   //ここで初期化 game.onload = function(){   /...
スタートアップ game.js                   enchantのお約束!enchant();                                  JavaScriptのお約束!window.onload=fun...
スタートアップ game.js                                  ゲーム(オブジェクト)を生成enchant();window.onload=function(){ var game = new Game(320...
ゲーム的な動きをつくる
ゲーム的な動きを作る● まずはキャラの配置● キャラを動かす● ステージを配置する● 当たり判定● ゲームスタート&ゲームオーバー● コントローラーの設置(タッチデバイス用)
まずはキャラの配置        クマさん
まずはキャラの配置 game.jsvar game = new Game(320, 320);  game.fps = 24;    game.preload(chara1.gif);    game.onload = function(){ ...
まずはキャラの配置 game.js                                フレームレートの設定var game = new Game(320, 320);    game.fps = 24;               ...
デモ
キャラを動かす          クマさん走る
キャラを動かす//bearの動きの設定 イベントはフレーム毎bear.addEventListener(Event.ENTER_FRAME,function() {    //左    if (game.input.left) {       ...
キャラを動かす                 キャラにイベントリスナーを追加//bearの動きの設定 イベントはフレーム毎bear.addEventListener(Event.ENTER_FRAME,function() {    //左 ...
キャラを動かす//bearの動きの設定 イベントはフレーム毎bear.addEventListener(Event.ENTER_FRAME,function() {    //左    if (game.input.left) {       ...
デモ
ステージを配置する
ステージを配置する//MAPを表示させるvar blocks = [   [ -1, -1,//省略// -1, -1, -1, -1 ],   ////////////////省略/////////////////////   [ 0, 0,...
ステージを配置する                     配列で表示する画像を管                                   理//MAPを表示させるvar blocks = [                    ...
ステージを配置する//MAPを表示させるvar blocks = [   [ -1, -1,//省略// -1, -1, -1, -1 ],   ////////////////省略/////////////////////          ...
ステージを配置する        map2.gif
ステージを配置する   生成したオブジェクトのサイズで      配列として扱える
ステージを配置する game.onload = function(){     //---------------省略-------------------//     //rootSceneに追加     game.rootScene.add...
デモ
実はクマさんも・・・         chara1.gif
実はクマさんも・・・                     サイズ(32,32)      「chara1.gif」を切り出して          呼び出している
実はクマさんも・・・                   デフォルトは0(1番目)         「bear.frame = 番号」      で何番目を表示するか指定する。
当たり判定        当たった!!!
当たり判定//星を表示var star = new Sprite(16, 16);star.image = game.assets[icon0.gif];star.frame = [30];//-------------------省略----...
当たり判定                                    キャラを一つ追加//星を表示var star = new Sprite(16, 16);star.image = game.assets[icon0.gif];s...
当たり判定//星を表示var star = new Sprite(16, 16);star.image = game.assets[icon0.gif]; 当たり判定の処理star.frame = [30];                  ...
デモ
ゲームスタート&ゲームオーバー
ゲームスタート&ゲームオーバー   ゲームスタートとゲームオーバーの        画像を用意
ゲームスタート&ゲームオーバー   (注意)HTMLファイルと同じ階層に         置きましょう。
ゲームスタート&ゲームオーバー     ゲームスタートは画像を      用意するだけでOK
ゲームスタート&ゲームオーバー HTML<html>//-------------------省略--------------------//<head><script type="text/javascript" src="enchant.j...
ゲームスタート&ゲームオーバー//星を表示var star = new Sprite(16, 16);star.image = game.assets[icon0.gif];//-------------------省略------------...
デモ
コントローラーの設置(タッチデバイス用)
コントローラーの設置(タッチデバイス用)          pad.png
コントローラーの設置(タッチデバイス用)    (注意)HTMLファイルと同じ階層に          置きましょう。
コントローラーの設置(タッチデバイス用)<html>//-------------------省略--------------------//<head><script type="text/javascript" src="enchant.j...
コントローラーの設置(タッチデバイス用)game.onload = function() {//-------------------省略--------------------//// バーチャルキーパッドを生成               ...
コントローラーの設置(タッチデバイス用)game.onload = function() {//-------------------省略--------------------//// バーチャルキーパッドを生成var pad = new P...
デモ
ゲームを作って みました!
デモ
なんとかゲーム  が       ぽいもの  出来ました!
まとめ
まとめ● スタートアップがらくちん● 必要なものがそろっている● 少ないコードでゲームが作れる● プログラムの学習にも最適
ありがとうございました
さらに詳しい解説は● 公式サイトのサンプルコード● code9leap● ドットインストール● enchant.js プログラミング入門の資料● tl.enchant.jsの解説● JavaScriptベースゲームエンジン徹底比較
Upcoming SlideShare
Loading in …5
×

enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン

1,983
-1

Published on

2 Comments
2 Likes
Statistics
Notes
  • ◆サンプル ※下記のサンプルはjs.do.it上ではキーボド操作が聞きませんがダウンロード頂けまし たら操作が可能です。 

    スタートアップ http://jsdo.it/3panda_dev/3HxG
    まずはキャラの配置 http://jsdo.it/3panda_dev/cJK6
    キャラを動かす http://jsdo.it/3panda_dev/i9IX
    当たり判定 http://jsdo.it/3panda_dev/zCbh
    ゲームスタート&ゲームオーバー http://jsdo.it/3panda_dev/9U2y
    コントローラーの設置(タッチデバイス用) http://jsdo.it/3panda_dev/qEql
    ※コントローラーは動きます。
    ガイコツから逃げるクマ http://jsdo.it/3panda_dev/mxAX
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 2012/9/15 の「パンダの会」その七 での私の発表です。
    内容は7/21のものをベースに解説を付け加えたものです。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,983
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン

  1. 1. enchant.jsでゲーム制作を はじめてみよう 「パンダの会」バージョン 2012.9.15 「パンダの会」 その七 3panda(Ryota Shiroguchi)
  2. 2. 私について● @3panda● 仕事はHTMLとかCSS触ってます。● プログラムは 苦手です。● ファミコン世代です。● パンダが大好きです。
  3. 3. このお話の流れ● enchant.jsについて● スタートアップ● ゲーム的な動きをつくる(デモ&解説)● ゲームを作ってみました!● まとめ
  4. 4. enchant.jsについて
  5. 5. enchant.jsとは● ゲームエンジン● HTML5 + JavaScript● クロスプラットフォーム● 日本製(株式会社ユビキタスエンターテインメントが公開)
  6. 6. enchant.jsの良いところ● スタートアップが楽ちん● サンプルが豊富● ドキュメントが日本語● 公式のプラグインも豊富
  7. 7. スタートアップ
  8. 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. 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. 10. スタートアップ game.jsenchant();window.onload=function(){ var game = new Game(320, 320);   //ここで初期化 game.onload = function(){   //ここにゲーム処理を書く } game.start();}
  11. 11. スタートアップ game.js enchantのお約束!enchant(); JavaScriptのお約束!window.onload=function(){ var game = new Game(320, 320);   //ここで初期化 game.onload = function(){   //ここにゲーム処理を書く } game.start();}
  12. 12. スタートアップ game.js ゲーム(オブジェクト)を生成enchant();window.onload=function(){ var game = new Game(320, 320);   //ここで初期化 game.onload = function(){   //ここにゲーム処理を書く ゲーム中の処理 } game.start();} ゲームをスタート!
  13. 13. ゲーム的な動きをつくる
  14. 14. ゲーム的な動きを作る● まずはキャラの配置● キャラを動かす● ステージを配置する● 当たり判定● ゲームスタート&ゲームオーバー● コントローラーの設置(タッチデバイス用)
  15. 15. まずはキャラの配置  クマさん
  16. 16. まずはキャラの配置 game.jsvar 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. 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. 18. デモ
  19. 19. キャラを動かす クマさん走る
  20. 20. キャラを動かす//bearの動きの設定 イベントはフレーム毎bear.addEventListener(Event.ENTER_FRAME,function() { //左 if (game.input.left) { this.x -= 3; this.scaleX = -1; } //・・・省略・・・});
  21. 21. キャラを動かす キャラにイベントリスナーを追加//bearの動きの設定 イベントはフレーム毎bear.addEventListener(Event.ENTER_FRAME,function() { //左 if (game.input.left) { this.x -= 3; this.scaleX = -1; } //・・・省略・・・});
  22. 22. キャラを動かす//bearの動きの設定 イベントはフレーム毎bear.addEventListener(Event.ENTER_FRAME,function() { //左 if (game.input.left) { イベントはフレーム毎 this.x -= 3; this.scaleX = -1; } //・・・省略・・・});
  23. 23. デモ
  24. 24. ステージを配置する
  25. 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. 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. 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. 28. ステージを配置する map2.gif
  29. 29. ステージを配置する 生成したオブジェクトのサイズで 配列として扱える
  30. 30. ステージを配置する game.onload = function(){ //---------------省略-------------------// //rootSceneに追加 game.rootScene.addChild(bear); game.rootScene.addChild(map); } ※ルートシーンに追加 game.start();} ※オブジェクトは シーンに追加する事で表示
  31. 31. デモ
  32. 32. 実はクマさんも・・・ chara1.gif
  33. 33. 実はクマさんも・・・ サイズ(32,32) 「chara1.gif」を切り出して 呼び出している
  34. 34. 実はクマさんも・・・ デフォルトは0(1番目) 「bear.frame = 番号」 で何番目を表示するか指定する。
  35. 35. 当たり判定 当たった!!!
  36. 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. 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. 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. 39. デモ
  40. 40. ゲームスタート&ゲームオーバー
  41. 41. ゲームスタート&ゲームオーバー ゲームスタートとゲームオーバーの 画像を用意
  42. 42. ゲームスタート&ゲームオーバー (注意)HTMLファイルと同じ階層に 置きましょう。
  43. 43. ゲームスタート&ゲームオーバー ゲームスタートは画像を 用意するだけでOK
  44. 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. 45. ゲームスタート&ゲームオーバー//星を表示var star = new Sprite(16, 16);star.image = game.assets[icon0.gif];//-------------------省略--------------------////星との当たり判定 if(this.within(star, 15)) { ゲームオーバーの this.frame = 3; 処理 game.end();}
  46. 46. デモ
  47. 47. コントローラーの設置(タッチデバイス用)
  48. 48. コントローラーの設置(タッチデバイス用) pad.png
  49. 49. コントローラーの設置(タッチデバイス用) (注意)HTMLファイルと同じ階層に 置きましょう。
  50. 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. 51. コントローラーの設置(タッチデバイス用)game.onload = function() {//-------------------省略--------------------//// バーチャルキーパッドを生成 バーチャルキーパッドを生var pad = new Pad(); 成pad.moveTo(0, 220);//-------------------省略--------------------//
  52. 52. コントローラーの設置(タッチデバイス用)game.onload = function() {//-------------------省略--------------------//// バーチャルキーパッドを生成var pad = new Pad();pad.moveTo(0, 220);//-------------------省略--------------------// バーチャルキーパッドを配 置
  53. 53. デモ
  54. 54. ゲームを作って みました!
  55. 55. デモ
  56. 56. なんとかゲーム が ぽいもの 出来ました!
  57. 57. まとめ
  58. 58. まとめ● スタートアップがらくちん● 必要なものがそろっている● 少ないコードでゲームが作れる● プログラムの学習にも最適
  59. 59. ありがとうございました
  60. 60. さらに詳しい解説は● 公式サイトのサンプルコード● code9leap● ドットインストール● enchant.js プログラミング入門の資料● tl.enchant.jsの解説● JavaScriptベースゲームエンジン徹底比較
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×