enchant.jsでゲーム制作をはじめてみよう

10,383 views

Published on

Published in: Entertainment & Humor

enchant.jsでゲーム制作をはじめてみよう

  1. 1. enchant.jsでゲーム制作を はじめてみよう 2012.7.21 第5回 HTML5など勉強会 Ryota Shiroguchi
  2. 2. 私について● @3panda● 仕事はHTMLとかCSS触ってます。● プログラムは 苦手です;● 「パンダの会」の主催 次回は9/15(土)!!● パンダが大好きです。
  3. 3. enchant.jsとは● ゲームエンジン● HTML5 + JavaScript● クロスプラットフォーム● 日本製(株式会社ユビキタスエンターテインメントが公開)
  4. 4. enchant.jsの良いところ● スタートアップが楽ちん● サンプルが豊富● ドキュメントが日本語● 公式のプラグインも豊富
  5. 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. 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. 7. スタートアップ game.jsenchant();window.onload=function(){ var game = new Game(320, 320);   //ここで初期化 game.onload = function(){   //ここにゲーム処理を書く } game.start();}
  8. 8. スタートアップ game.js enchantのお約束!enchant(); JavaScriptのお約束!window.onload=function(){ var game = new Game(320, 320);   //ここで初期化 game.onload = function(){   //ここにゲーム処理を書く } game.start();}
  9. 9. スタートアップ game.js ゲーム(オブジェクト)を生成enchant();window.onload=function(){ var game = new Game(320, 320);   //ここで初期化 game.onload = function(){   //ここにゲーム処理を書く ゲーム中の処理 } game.start();} ゲームをスタート!
  10. 10. まずはキャラの配置 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();}
  11. 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. 12. ゲーム的な動きのデモ&解説● キャラを動かす● ステージを配置する● 当たり判定
  13. 13. キャラを動かす//bearの動きの設定 イベントはフレーム毎bear.addEventListener(Event.ENTER_FRAME,function() { //左 if (game.input.left) { this.x -= 3; this.scaleX = -1; } //・・・省略・・・});
  14. 14. キャラを動かす キャラにイベントリスナーを追加//bearの動きの設定 イベントはフレーム毎bear.addEventListener(Event.ENTER_FRAME,function() { //左 if (game.input.left) { this.x -= 3; this.scaleX = -1; } //・・・省略・・・});
  15. 15. キャラを動かす//bearの動きの設定 イベントはフレーム毎bear.addEventListener(Event.ENTER_FRAME,function() { //左 if (game.input.left) { イベントはフレーム毎 this.x -= 3; this.scaleX = -1; } //・・・省略・・・});
  16. 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. 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. 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. 19. ステージを配置する game.onload = function(){ //---------------省略-------------------// //rootSceneに追加 game.rootScene.addChild(bear); game.rootScene.addChild(map); } ※ルートシーンに追加 game.start();} ※オブジェクトは シーンに追加する事で表示
  20. 20. 当たり判定//星を表示var star = new Sprite(16, 16);star.image = game.assets[icon0.gif];//-------------------省略--------------------////星との当たり判定 if(this.within(star, 15)) { label.text = 当たった!; this.frame = 3;}
  21. 21. 当たり判定 キャラを一つ追加//星を表示var star = new Sprite(16, 16);star.image = game.assets[icon0.gif];//-------------------省略--------------------////星との当たり判定 if(this.within(star, 15)) { label.text = 当たった!; this.frame = 3;}
  22. 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. 23. プラグイン● ui.enchant.js● nineleap.enchant.js
  24. 24. ui.enchant.js● ゲームパッド● アナログパッド● ボタン
  25. 25. nineleap.enchant.js● ゲームスタート画面● ゲームオーバー画面● ただしあくまで簡易
  26. 26. なんとかゲーム を作れましたぽいもの
  27. 27. その他プラグイン(サンプル紹介)● tl.enchant.js(アニメーション)● gl.enchant.js(Web GL)● widget.enchant.js(インターフェイス)※ ※現在未発表の為、サンプルはありません
  28. 28. さらに詳しい解説は● 公式サイトのサンプルコード● code9leap● ドットインストール● enchant.js プログラミング入門の資料● tl.enchant.jsの解説
  29. 29. まとめ● やっぱり簡単● プログラムの勉強にも● ゲーム開発の需要の予感も
  30. 30. まとめ● やっぱり簡単● プログラムの勉強にも● ゲーム開発の需要の予感も・・・でも結局のところ言いたい事は
  31. 31. ゲームをつくるのはおもしろいw
  32. 32. ありがとうございました

×