-入門- enchant.js でゲームを作ろう

7,154 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,154
On SlideShare
0
From Embeds
0
Number of Embeds
938
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

-入門- enchant.js でゲームを作ろう

  1. 1. - 入門 -enchant.js でゲームを作ろう by nico 2013.02.25 @ TechBuzz 1/21
  2. 2. 自己紹介名前:nico(@nico0927)仕事:WEB ディレクター   (フリーランス)分野:企画~デザイン~サーバーサイドまで   浅く広く。元は HTML+CSS+JS コーダー。最近:WEB 制作・WEB リテラシー講座の講師。   WEB マーケティング勉強中。 2/21
  3. 3. ゲームを作ってみたい!C/C++/Objective-C ?OpenGL ? めんどくさい! もっと簡単に作れないの? 3/21
  4. 4. enchant.js http://enchantjs.com HTML5 + JS ベースのゲーム開発ライブラリ オープンソース(MIT ライセンス) 4/21
  5. 5. enchant.js なら ... ブラウザ + エディタだけで開発できる Win/Mac・iOS/Android 対応 Firefox・Chrome・Safari・IE9 ~ etc... 対応 豊富なプラグイン 5/21
  6. 6. できました!「つちねこ集め」 「SUPER TAINYANS」 6/21
  7. 7. - 解説 1 -enchant.js の使い方 7/21
  8. 8. まずは読み込み<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> テストゲーム </title></head><body> <div id="enchant-stage"></div> <script src="enchant.js"></script> <script src="test.game.js"></script></body> 新規作成</html> 8/21
  9. 9. test.game.js の中身enchant();window.onload = function(){ var game = new Game(320, 320); game.onload = function(){ // ここにゲーム内容を書いてく } game.start();} 9/21
  10. 10. ステージに何かを表示するenchant();window.onload = function(){ var game = new Game(320, 320); game.preload(chara1.png);// ゲームで使う素材を読み込む game.onload = function(){ var kuma = new Sprite(32,32); kuma.image = game.assets[chara1.png]; game.rootScene.addChild(kuma);// クマを配置 } game.start();} 10/21
  11. 11. 表示したものをキー入力で動かす// キー入力でクマを動かすkuma.onenterframe = function(){ if(game.input.right){ this.x += 1; }} 11/21
  12. 12. - 解説 2 -enchant.js の特徴の一つ “クラス定義と継承” 12/21
  13. 13. JS でのクラス定義と継承Kuma = function(){ プロトタイプベース}Kuma.prototype.gaooo = function(){ alert(" ガオオオ! ");}Higma = function(){}Higma.prototype = new Kuma(); ← 継承!var higma = new Higma();higma.gaooo(); 13/21
  14. 14. enchant.js でのクラス定義と継承Kuma = Class.create({ クラスベースっぽく initialize: function(){ }, 書ける! gaooo: function(){ alert(" ガオオオ! "); }});Higma = Class.create(Kuma,{ ← 継承! initialize:function(){ }});var higma = new Higma();higma.gaooo(); 14/21
  15. 15. - 解説 3 -便利なプラグイン 15/21
  16. 16. enchant.js の後に読み込んで使う<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> テストゲーム </title></head><body> <div id="enchant-stage"></div> <script src="enchant.js"></script> <script src="ui.enchant.js"></script> <script src="test.game.js"></script></body></html> 16/21
  17. 17. ui.enchant.js タッチパッド表示用のプラグイン(公式サイトからダウンロードの zip に同梱)var pad = new Pad();pad.moveTo(10,370);game.rootScene.addChild(pad);とかで、ステージにパッドを設置。→ スマホから操作可能に!※別途、ui.enchant.js 内でパッド 画像へのパスを通す 17/21
  18. 18. tl.enchant.js 時間に沿った動きを管理するプラグイン(ui ~と同じくダウンロードの zip に同梱)(例) higma.tl.delay(24).then(function(){ this.gaooo(); }); → 24 フレーム後(game.fps = 24 なら 1 秒後)   にガオオオ!発動 18/21
  19. 19. - まとめ -本日の要点 19/21
  20. 20. → enchant.js ならゲーム開発が超手軽に (しかもマルチプラットフォーム)→ 独自のクラス定義でクラスベースっぽく書ける → 同梱のプラグインで楽々カスタマイズ 20/21
  21. 21. - おしまい -- 入門 - enchant.js でゲームを作ろう by nico(@nico0927) 21/21

×