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

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

on

  • 10,319 views

 

Statistics

Views

Total Views
10,319
Views on SlideShare
6,627
Embed Views
3,692

Actions

Likes
7
Downloads
21
Comments
0

6 Embeds 3,692

http://it-ch.net 3663
http://emono.edoblog.net 14
https://si0.twimg.com 5
https://twimg0-a.akamaihd.net 5
http://translate.googleusercontent.com 4
http://webcache.googleusercontent.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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