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でゲーム制作をはじめてみよう 「パンダの会」バージョン

1,805

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,805
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
2
Likes
2
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.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.jsenchant();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.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. まずはキャラの配置 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ベースゲームエンジン徹底比較

×