Your SlideShare is downloading. ×
enchant.jsでゲーム制作をはじめてみよう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

9,701
views

Published on

Published in: Entertainment & Humor

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

No Downloads
Views
Total Views
9,701
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×