Embed Size (px)
DESCRIPTION
IMPACTJS and iOSIMPACT beginner's guide.
Citation preview
HTML5 + JavaScriptで作るゲーム開発
•自己紹介
•自己紹介• IMPACTの紹介
•自己紹介• IMPACTの紹介• IMPACTのワークフロー
•自己紹介• IMPACTの紹介• IMPACTのワークフロー• iOSとIMPACT
•自己紹介• IMPACTの紹介• IMPACTのワークフロー• iOSとIMPACT•デモ
自己紹介 part1
@Seasonscocos2d AUTHORKobold2D member
Blog：Seasons.NET•cocos2dリリース情報の翻訳•テクニカル情報の翻訳•Kobold2Dドキュメント翻訳
@cocos2dfan_jp 管理人•cocos2dに関する情報を不定期にポスト
自己紹介 part2
iOSでの代表作
執筆業務iPhoneマガジン、Software Design
IMPACTの紹介
•有償$99ライセンスが必要
IMPACTの紹介
•有償$99ライセンスが必要•2Dゲーム開発フレームワーク
IMPACTの紹介
•有償$99ライセンスが必要•2Dゲーム開発フレームワーク•HTML5 + JavaScriptで開発
IMPACTの紹介
•有償$99ライセンスが必要•2Dゲーム開発フレームワーク•HTML5 + JavaScriptで開発•ゲームに特化したクラス群
IMPACTの紹介
•有償$99ライセンスが必要•2Dゲーム開発フレームワーク•HTML5 + JavaScriptで開発•ゲームに特化したクラス群•高度なレベルエディタ付属
IMPACTの紹介
•有償$99ライセンスが必要•2Dゲーム開発フレームワーク•HTML5 + JavaScriptで開発•ゲームに特化したクラス群•高度なレベルエディタ付属•連携ツール
IMPACTの紹介
IMPACTの紹介
IMPACTの紹介
http://impactjs.com/
ググる時は、”IMPACT javascript”で検索!!
IMPACTの紹介
http://impactjs.com/
ググる時は、”IMPACT javascript”で検索!!
$99ドル買い切りライセンス
IMPACTの紹介
http://impactjs.com/
ググる時は、”IMPACT javascript”で検索!!
$99ドル買い切りライセンス•体験版なし
IMPACTの紹介
http://impactjs.com/
ググる時は、”IMPACT javascript”で検索!!
$99ドル買い切りライセンス•体験版なし•購入後のライセンスキーでリソースアクセス
IMPACTの紹介
http://impactjs.com/
ググる時は、”IMPACT javascript”で検索!!
$99ドル買い切りライセンス•体験版なし•購入後のライセンスキーでリソースアクセス•リソースページでサンプル、ライブラリ配布
IMPACTの紹介
http://impactjs.com/
ググる時は、”IMPACT javascript”で検索!!
$99ドル買い切りライセンス•体験版なし•購入後のライセンスキーでリソースアクセス•リソースページでサンプル、ライブラリ配布•最新版は、githubで取得可能(ライセンス必須)
IMPACTの紹介
http://impactjs.com/
ググる時は、”IMPACT javascript”で検索!!
$99ドル買い切りライセンス•体験版なし•購入後のライセンスキーでリソースアクセス•リソースページでサンプル、ライブラリ配布•最新版は、githubで取得可能(ライセンス必須)
version 1.19new!!
IMPACTの紹介
http://impactjs.com/
ググる時は、”IMPACT javascript”で検索!!
$99ドル買い切りライセンス•体験版なし•購入後のライセンスキーでリソースアクセス•リソースページでサンプル、ライブラリ配布•最新版は、githubで取得可能(ライセンス必須)
impact ライブラリ
version 1.19new!!
IMPACTの紹介
http://impactjs.com/
ググる時は、”IMPACT javascript”で検索!!
$99ドル買い切りライセンス•体験版なし•購入後のライセンスキーでリソースアクセス•リソースページでサンプル、ライブラリ配布•最新版は、githubで取得可能(ライセンス必須)
impact ライブラリ
weltmeister(レベルエディタ)
version 1.19new!!
IMPACTの紹介
HTML5 + JavaScript
IMPACTの紹介
HTML5 + JavaScript
Canvas
Audio
IMPACTの紹介
HTML5 + JavaScript
Canvas
Audio
JavaScript
Entity
Game
Input
Sound
Font Timer
Animation
Collision
etc...
IMPACTの紹介
HTML5 + JavaScript
Canvas
Audio
JavaScript
Entity
Game
Input
Sound
Font Timer
Animation
Collision
Debug
IMPACTの紹介
HTML5 + JavaScript
Canvas
Audio
JavaScript
Entity
Game
Input
Sound
Font Timer
Animation
Collision
•2Dゲーム開発に特化
Debug
IMPACTの紹介
HTML5 + JavaScript
Canvas
Audio
JavaScript
Entity
Game
Input
Sound
Font Timer
Animation
Collision
•2Dゲーム開発に特化•ゲーム制作に必要なクラスを用意
Debug
IMPACTの紹介
HTML5 + JavaScript
Canvas
Audio
JavaScript
Entity
Game
Input
Sound
Font Timer
Animation
Collision
•2Dゲーム開発に特化•ゲーム制作に必要なクラスを用意•HTML5のAudio,Canvasを利用
Debug
IMPACTの紹介
HTML5 + JavaScript
Canvas
Audio
JavaScript
Entity
Game
Input
Sound
Font Timer
Animation
Collision
•2Dゲーム開発に特化•ゲーム制作に必要なクラスを用意•HTML5のAudio,Canvasを利用•どのブラウザでも動作
Debug
IMPACTの紹介
HTML5 + JavaScript
Canvas
Audio
JavaScript
Entity
Game
Input
Sound
Font Timer
Animation
Collision
•2Dゲーム開発に特化•ゲーム制作に必要なクラスを用意•HTML5のAudio,Canvasを利用•どのブラウザでも動作
Debug
IMPACTの紹介
Weltmeister(レベルエディタ)
IMPACTの紹介
Weltmeister(レベルエディタ)
IMPACTの紹介
Weltmeister(レベルエディタ)
IMPACTの紹介
Weltmeister(レベルエディタ)
IMPACTの紹介
Weltmeister(レベルエディタ)
•HTML5製(ブラウザで動作):Chrome推奨
IMPACTの紹介
Weltmeister(レベルエディタ)
•HTML5製(ブラウザで動作):Chrome推奨•タイルをマウスで塗る感じでマップ作成
IMPACTの紹介
Weltmeister(レベルエディタ)
•HTML5製(ブラウザで動作):Chrome推奨•タイルをマウスで塗る感じでマップ作成•ゲームレベルの構築、バランス調整
IMPACTの紹介
Weltmeister(レベルエディタ)
•HTML5製(ブラウザで動作):Chrome推奨•タイルをマウスで塗る感じでマップ作成•ゲームレベルの構築、バランス調整•コリジョン、イベントの設定も可能
IMPACTの紹介
連携ツール
http://impactjs.com/
※本家サイト Toolsリンクより
tween.js , box2d.js , director.jsなどライブラリ連携も可能
IMPACTの紹介
連携ツール
http://impactjs.com/
※本家サイト Toolsリンクより
tween.js , box2d.js , director.jsなどライブラリ連携も可能
PhoneGap iOS,Android ゲームパッケージ用
IMPACTの紹介
連携ツール
http://impactjs.com/
※本家サイト Toolsリンクより
tween.js , box2d.js , director.jsなどライブラリ連携も可能
PhoneGap iOS,Android ゲームパッケージ用
Lawnchair JSONベースのドキュメントストア
IMPACTの紹介
連携ツール
http://impactjs.com/
※本家サイト Toolsリンクより
tween.js , box2d.js , director.jsなどライブラリ連携も可能
PhoneGap iOS,Android ゲームパッケージ用
Lawnchair JSONベースのドキュメントストア
TapJS ゲームプラットフォーム提供
IMPACTの紹介
連携ツール
http://impactjs.com/
※本家サイト Toolsリンクより
tween.js , box2d.js , director.jsなどライブラリ連携も可能
PhoneGap iOS,Android ゲームパッケージ用
Lawnchair JSONベースのドキュメントストア
TapJS ゲームプラットフォーム提供
appMobi web上でiOS,Androidアプリ作成
IMPACTの紹介
連携ツール
http://impactjs.com/
※本家サイト Toolsリンクより
tween.js , box2d.js , director.jsなどライブラリ連携も可能
PhoneGap iOS,Android ゲームパッケージ用
Lawnchair JSONベースのドキュメントストア
TapJS ゲームプラットフォーム提供
appMobi web上でiOS,Androidアプリ作成
Zeewe.com Cross Platform用appstore
IMPACTの紹介
連携ツール
http://impactjs.com/
※本家サイト Toolsリンクより
tween.js , box2d.js , director.jsなどライブラリ連携も可能
PhoneGap iOS,Android ゲームパッケージ用
Lawnchair JSONベースのドキュメントストア
TapJS ゲームプラットフォーム提供
appMobi web上でiOS,Androidアプリ作成
Playtomic アナリティクス、スコアボード提供
Zeewe.com Cross Platform用appstore
IMPACTのワークフロー
•開発環境の構築
IMPACTのワークフロー
•開発環境の構築• IMPACTのお作法
IMPACTのワークフロー
•開発環境の構築• IMPACTのお作法•配布(Publish)
IMPACTのワークフロー
IMPACTのワークフロー
開発に必要なもの
IMPACTのワークフロー
開発に必要なもの
PC ( Windows,Mac,Linux ... )
IMPACTのワークフロー
開発に必要なもの
PC ( Windows,Mac,Linux ... ) http://www.apachefriends.org/jp/xampp-windows.html
XAMPP( Apache )
IMPACTのワークフロー
開発に必要なもの
PC ( Windows,Mac,Linux ... )
ブラウザ
http://www.apachefriends.org/jp/xampp-windows.html
XAMPP( Apache )
IMPACTのワークフロー
開発に必要なもの
PC ( Windows,Mac,Linux ... )
ブラウザ
http://www.apachefriends.org/jp/xampp-windows.html
XAMPP( Apache )
テキストエディタ
IMPACTのワークフロー
オススメエディタ
IMPACTのワークフロー
オススメエディタ
http://macromates.com/
•有償：$57( 約4500円 )
IMPACTのワークフロー
オススメエディタ
http://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ
IMPACTのワークフロー
オススメエディタ
http://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ•Ruby on Rails使い必須らしい
IMPACTのワークフロー
オススメエディタ
http://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ•Ruby on Rails使い必須らしい•カスタマイズ機能が豊富
IMPACTのワークフロー
オススメエディタ
http://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ•Ruby on Rails使い必須らしい•カスタマイズ機能が豊富
https://github.com/paularmstrong/ImpactJS.tmbundle
tmbundle
IMPACTのワークフロー
オススメエディタ
http://www.activestate.com/komodo-edithttp://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ•Ruby on Rails使い必須らしい•カスタマイズ機能が豊富
https://github.com/paularmstrong/ImpactJS.tmbundle
tmbundle
IMPACTのワークフロー
オススメエディタ
http://www.activestate.com/komodo-edithttp://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ•Ruby on Rails使い必須らしい•カスタマイズ機能が豊富
•無償：0円
https://github.com/paularmstrong/ImpactJS.tmbundle
tmbundle
IMPACTのワークフロー
オススメエディタ
http://www.activestate.com/komodo-edithttp://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ•Ruby on Rails使い必須らしい•カスタマイズ機能が豊富
•無償：0円•ちょと起動が遅い。
https://github.com/paularmstrong/ImpactJS.tmbundle
tmbundle
IMPACTのワークフロー
オススメエディタ
http://www.activestate.com/komodo-edithttp://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ•Ruby on Rails使い必須らしい•カスタマイズ機能が豊富
•無償：0円•ちょと起動が遅い。•補完をデフォルトで装備(精度低い)
https://github.com/paularmstrong/ImpactJS.tmbundle
tmbundle
IMPACTのワークフロー
オススメエディタ
http://www.activestate.com/komodo-edithttp://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ•Ruby on Rails使い必須らしい•カスタマイズ機能が豊富
•無償：0円•ちょと起動が遅い。•補完をデフォルトで装備(精度低い)•カスタマイズ可能
https://github.com/paularmstrong/ImpactJS.tmbundle
tmbundle
IMPACTのワークフロー
オススメエディタ
http://www.activestate.com/komodo-edithttp://macromates.com/
•有償：$57( 約4500円 )•軽い!! web界では超有名エディタ•Ruby on Rails使い必須らしい•カスタマイズ機能が豊富
•無償：0円•ちょと起動が遅い。•補完をデフォルトで装備(精度低い)•カスタマイズ可能•本家IMPACTの動画でも使われている
https://github.com/paularmstrong/ImpactJS.tmbundle
tmbundle
IMPACTのワークフロー
開発ワークフロー
IMPACTのワークフロー
開発ワークフロー
素材作成
IMPACTのワークフロー
開発ワークフロー
素材作成
IMPACTのワークフロー
開発ワークフロー
Entityの作成
素材作成
IMPACTのワークフロー
開発ワークフロー
Entityの作成
素材作成
IMPACTのワークフロー
開発ワークフロー
Entityの作成
素材作成
レベル作成(Weltmeister)
IMPACTのワークフロー
開発ワークフロー
Entityの作成
素材作成
レベル作成(Weltmeister)
IMPACTのワークフロー
開発ワークフロー
Entityの作成
素材作成
レベル作成(Weltmeister)
テストプレイ
IMPACTのワークフロー
素材作成
IMPACTのワークフロー
素材作成
IMPACTのワークフロー
素材作成IMPACTで使う素材は、ドット絵が多い。以下のソフトを使って作成。
IMPACTのワークフロー
素材作成IMPACTで使う素材は、ドット絵が多い。以下のソフトを使って作成。
IMPACTのワークフロー
素材作成IMPACTで使う素材は、ドット絵が多い。以下のソフトを使って作成。
IMPACTのワークフロー
エンティティの作成
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊•エンティティは、ig.Entityを継承
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊•エンティティは、ig.Entityを継承•必要なパラメーターを実装
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊•エンティティは、ig.Entityを継承•必要なパラメーターを実装•名前は、Entity + ファイル名
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊•エンティティは、ig.Entityを継承•必要なパラメーターを実装•名前は、Entity + ファイル名
＊記述するコード＊
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊•エンティティは、ig.Entityを継承•必要なパラメーターを実装•名前は、Entity + ファイル名
＊記述するコード＊•init:初期化コード
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊•エンティティは、ig.Entityを継承•必要なパラメーターを実装•名前は、Entity + ファイル名
＊記述するコード＊•init:初期化コード•update:毎フレーム処理するコード( キー入力、移動処理など )
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊•エンティティは、ig.Entityを継承•必要なパラメーターを実装•名前は、Entity + ファイル名
＊記述するコード＊•init:初期化コード•update:毎フレーム処理するコード( キー入力、移動処理など )•draw:カスタム描画コード
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊•エンティティは、ig.Entityを継承•必要なパラメーターを実装•名前は、Entity + ファイル名
＊記述するコード＊•init:初期化コード•update:毎フレーム処理するコード( キー入力、移動処理など )•draw:カスタム描画コード•check:当たり判定コード
IMPACTのワークフロー
エンティティの作成ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {! ! /* 毎フレーム処理すること */! ! this.parent();! },});});
＊エンティティについて＊•エンティティは、ig.Entityを継承•必要なパラメーターを実装•名前は、Entity + ファイル名
＊記述するコード＊•init:初期化コード•update:毎フレーム処理するコード( キー入力、移動処理など )•draw:カスタム描画コード•check:当たり判定コードetc...
IMPACTのワークフロー
レベル作成
IMPACTのワークフロー
レベル作成
IMPACTのワークフロー
レベル作成直感的な操作
IMPACTのワークフロー
レベル作成
•マウスでタイルを描画+コリジョン•作成したエンティティを配置
直感的な操作
IMPACTのワークフロー
レベル作成
•マウスでタイルを描画+コリジョン•作成したエンティティを配置
直感的な操作
グラフィカルなイベント
IMPACTのワークフロー
レベル作成
•マウスでタイルを描画+コリジョン•作成したエンティティを配置
直感的な操作
グラフィカルなイベント
IMPACTのワークフロー
レベル作成
•マウスでタイルを描画+コリジョン•作成したエンティティを配置
直感的な操作
•関連するイベント同士をコネクト•イベントのコリジョンサイズの設定(マウスでドラッグして位置と調整)
グラフィカルなイベント
IMPACTのワークフロー
レベル作成
•マウスでタイルを描画+コリジョン•作成したエンティティを配置
直感的な操作
•関連するイベント同士をコネクト•イベントのコリジョンサイズの設定(マウスでドラッグして位置と調整)
グラフィカルなイベント
IMPACTのワークフロー
レベル作成
•マウスでタイルを描画+コリジョン•作成したエンティティを配置
直感的な操作
•関連するイベント同士をコネクト•イベントのコリジョンサイズの設定(マウスでドラッグして位置と調整)
グラフィカルなイベント
*.js レベルデータとして保存
IMPACTのワークフロー
テストプレイ
IMPACTのワークフロー
テストプレイ
IMPACTのワークフロー
テストプレイ
IMPACTのワークフロー
テストプレイ
IMPACTのワークフロー
テストプレイ
レベルの調整
IMPACTのワークフロー
テストプレイ
•バランス調整•マップ、エンティティの調整
レベルの調整
IMPACTのワークフロー
テストプレイ
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {!! /* 毎フレーム処理すること */! ! this.parent();! },});});
•バランス調整•マップ、エンティティの調整
レベルの調整
IMPACTのワークフロー
テストプレイ
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {!! /* 毎フレーム処理すること */! ! this.parent();! },});});
エンティティの調整
•バランス調整•マップ、エンティティの調整
レベルの調整
IMPACTのワークフロー
テストプレイ
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {!! /* 毎フレーム処理すること */! ! this.parent();! },});});
•動き、パラメータの調整•入力、描画の修正
エンティティの調整
•バランス調整•マップ、エンティティの調整
レベルの調整
IMPACTのワークフロー
チューニングnew!! 1.18
IMPACTのワークフロー
チューニングnew!! 1.18
IMPACTのワークフロー
チューニングnew!!
新機能：debugモジュール
1.18
IMPACTのワークフロー
チューニングnew!!
新機能：debugモジュール・パフォーマンスグラフ
1.18
IMPACTのワークフロー
チューニングnew!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能
1.18
IMPACTのワークフロー
チューニングnew!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
1.18
IMPACTのワークフロー
チューニングnew!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
version 1.18features
1.18
IMPACTのワークフロー
チューニングig.module( ! 'game.main' ).requires(! 'impact.game',! 'impact.font', // デバッグモジュールを有効! 'impact.debug.debug', ).defines(function(){
new!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
version 1.18features
1.18
IMPACTのワークフロー
チューニングig.module( ! 'game.main' ).requires(! 'impact.game',! 'impact.font', // デバッグモジュールを有効! 'impact.debug.debug', ).defines(function(){
new!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
version 1.18features
1.18
IMPACTのワークフロー
チューニングig.module( ! 'game.main' ).requires(! 'impact.game',! 'impact.font', // デバッグモジュールを有効! 'impact.debug.debug', ).defines(function(){
new!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
version 1.18features
1.18
IMPACTのワークフロー
チューニングig.module( ! 'game.main' ).requires(! 'impact.game',! 'impact.font', // デバッグモジュールを有効! 'impact.debug.debug', ).defines(function(){
new!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
version 1.18features
1.18
IMPACTのワークフロー
チューニングig.module( ! 'game.main' ).requires(! 'impact.game',! 'impact.font', // デバッグモジュールを有効! 'impact.debug.debug', ).defines(function(){
new!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
version 1.18features
1.18
IMPACTのワークフロー
チューニングig.module( ! 'game.main' ).requires(! 'impact.game',! 'impact.font', // デバッグモジュールを有効! 'impact.debug.debug', ).defines(function(){
new!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
version 1.18features
1.18
IMPACTのワークフロー
チューニングig.module( ! 'game.main' ).requires(! 'impact.game',! 'impact.font', // デバッグモジュールを有効! 'impact.debug.debug', ).defines(function(){
new!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
version 1.18features
1.18
IMPACTのワークフロー
チューニングig.module( ! 'game.main' ).requires(! 'impact.game',! 'impact.font', // デバッグモジュールを有効! 'impact.debug.debug', ).defines(function(){
new!!
新機能：debugモジュール・パフォーマンスグラフ・Entityのデバッグ機能・背景マップのデバッグ機能
version 1.18features
・コリジョンの表示・速度ベクトルの表示・エンティティ名、ターゲットの表示
1.18
IMPACTのワークフロー
チューニング：debug用API
IMPACTのワークフロー
チューニング：debug用API
ig.log 第1引数：出力したいメッセージ
IMPACTのワークフロー
チューニング：debug用API
ig.logconsole.logの代替え(Debugモジュール利用時のみ出力)
第1引数：出力したいメッセージ
IMPACTのワークフロー
チューニング：debug用API
ig.logconsole.logの代替え(Debugモジュール利用時のみ出力)
ig.show
第1引数：出力したいメッセージ
第1引数：パラメータ名
第2引数：出力したいパラメータ
IMPACTのワークフロー
チューニング：debug用API
ig.logconsole.logの代替え(Debugモジュール利用時のみ出力)
ig.show
第1引数：出力したいメッセージ
第1引数：パラメータ名
第2引数：出力したいパラメータ
デバッグパネルに常時表示（updateメソッド内に記述）
IMPACTのワークフロー
チューニング：debug用API
ig.logconsole.logの代替え(Debugモジュール利用時のみ出力)
ig.show
第1引数：出力したいメッセージ
第1引数：パラメータ名
第2引数：出力したいパラメータ
デバッグパネルに常時表示（updateメソッド内に記述）
ig.mark第1引数：マーキング名
第2引数：カラー値( #FFFなど )
IMPACTのワークフロー
チューニング：debug用API
ig.logconsole.logの代替え(Debugモジュール利用時のみ出力)
ig.show
第1引数：出力したいメッセージ
第1引数：パラメータ名
第2引数：出力したいパラメータ
デバッグパネルに常時表示（updateメソッド内に記述）
ig.mark第1引数：マーキング名
第2引数：カラー値( #FFFなど )
パフォーマンスグラフに表示（呼び出した時点でグラフに表示）
IMPACT新機能
コリジョンタイプ追加new!! 1.19
IMPACT新機能
コリジョンタイプ追加new!! 1.19
IMPACT新機能
コリジョンタイプ追加new!! 1.19
Slope
IMPACT新機能
コリジョンタイプ追加new!! 1.19
Slope
スロープ(坂)タイプの追加。
IMPACT新機能
コリジョンタイプ追加new!! 1.19
Slope
スロープ(坂)タイプの追加。
Passing
IMPACT新機能
コリジョンタイプ追加new!! 1.19
Slope
スロープ(坂)タイプの追加。
Passing
指定した方向のみ通過可能のコリジョン。
IMPACT新機能
コリジョンタイプ追加new!! 1.19
Slope
スロープ(坂)タイプの追加。
Passing
指定した方向のみ通過可能のコリジョン。
IMPACT新機能
コリジョンタイプ追加new!! 1.19
Slope
スロープ(坂)タイプの追加。
Passing
指定した方向のみ通過可能のコリジョン。
IMPACT新機能
コリジョンタイプ追加new!! 1.19
Slope
スロープ(坂)タイプの追加。
Passing
指定した方向のみ通過可能のコリジョン。
チェックを入れる。・Tilesizeに基づいて自動的にリサイズ
IMPACT新機能
コリジョンタイプ追加new!! 1.19
Slope
スロープ(坂)タイプの追加。
Passing
指定した方向のみ通過可能のコリジョン。
チェックを入れる。・Tilesizeに基づいて自動的にリサイズ
IMPACTのワークフロー
配布(Publish)
Tools bake.sh •IMPACTの開発環境に同梱済み• #bake.sh で実行
IMPACTのワークフロー
配布(Publish)
Tools bake.sh •IMPACTの開発環境に同梱済み• #bake.sh で実行
IMPACTのワークフロー
配布(Publish)
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
! init: function( x, y, settings ) { /* 初期化関連 */! },!! update: function() {!! /* 毎フレーム処理すること */! ! this.parent();! },});});
Tools bake.sh •IMPACTの開発環境に同梱済み• #bake.sh で実行
IMPACTのワークフロー
配布(Publish)
Tools bake.sh
game_min.js •全てのソースコードを連結•コードの難読化=圧縮
Bakeによる効果
ゲームファイル
•IMPACTの開発環境に同梱済み• #bake.sh で実行
iOSとIMPACT
• iOSIMPACTとは？
iOSとIMPACT
• iOSIMPACTとは？• iOSへの移植の注意点
iOSとIMPACT
iOSIMPACTとは？
iOSIMPACTとは？
iOSIMPACTとは？
iOSIMPACTとは？
iOSIMPACTとは？
＊特徴＊
iOSIMPACTとは？
•ソースコードがiOSでそのまま利用可能＊特徴＊
iOSIMPACTとは？
•ソースコードがiOSでそのまま利用可能•OpenGLで描画処理
＊特徴＊
iOSIMPACTとは？
•ソースコードがiOSでそのまま利用可能•OpenGLで描画処理•OpenALでサウンド処理
＊特徴＊
iOSIMPACTとは？
•ソースコードがiOSでそのまま利用可能•OpenGLで描画処理•OpenALでサウンド処理•30～60fps!!
＊特徴＊
iOSIMPACTとは？
•ソースコードがiOSでそのまま利用可能•OpenGLで描画処理•OpenALでサウンド処理•30～60fps!!•UIKitなどiOS独自の実装も可能
＊特徴＊
iOSIMPACTとは？
アーキテクチャ
iOSIMPACTとは？
アーキテクチャ
iOS
iOSIMPACTとは？
アーキテクチャ
JavaScriptCore
iOS
iOSIMPACTとは？
アーキテクチャ
JavaScriptCore
Audio（OpenAL）
iOS
iOSIMPACTとは？
アーキテクチャ
JavaScriptCore
Canvas（OpenGL）
Audio（OpenAL）
iOS
iOSIMPACTとは？
iOSの移植方法
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
iOSIMPACT Xcode Project
*.js
iOSIMPACTとは？
iOSの移植方法
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
iOSIMPACT Xcode Project
*.js
iOSIMPACTとは？
iOSの移植方法
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
iOSIMPACT Xcode Project
*.js
Build Succeed
iOSIMPACTとは？
iOSの移植方法
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
iOSIMPACT Xcode Project*.app
*.js
•ネイティブアプリケーション•AppStoreで販売可能
iOSIMPACTとは？
iOSの移植方法
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
iOSIMPACT Xcode Project*.app
*.js
•ネイティブアプリケーション•AppStoreで販売可能
iOSIMPACTとは？
iOSの移植方法
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
iOSIMPACT Xcode Project*.app
*.js 例)
•ネイティブアプリケーション•AppStoreで販売可能
iOSIMPACTとは？
iOSの移植方法
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
iOSIMPACT Xcode Project*.app
*.js 例)
Biolab Disaster
•ネイティブアプリケーション•AppStoreで販売可能
iOSIMPACTとは？
iOSの移植方法
ig.module(! 'game.entities.player').requires(! 'impact.entity').defines(function(){
EntityPlayer = ig.Entity.extend({!! size: {x: 12, y:10},! offset: {x: 4, y: 6},! type: ig.Entity.TYPE.A,! checkAgainst: ig.Entity.TYPE.NONE,! collides: ig.Entity.COLLIDES.PASSIVE,
iOSIMPACT Xcode Project*.app
*.js 例)
Drop JSBiolab Disaster
iOSIMPACTとは？
iOS移植ヘの注意点
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み ２）スクロールメソッド変更
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み ２）スクロールメソッド変更
ig.game.screen.x,y
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み ２）スクロールメソッド変更
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み ２）スクロールメソッド変更
ig.game.setScreenPos(x,y)
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み ２）スクロールメソッド変更
ig.game.setScreenPos(x,y)impact 1.18
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み ２）スクロールメソッド変更
impact 1.18
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み ２）スクロールメソッド変更
impact 1.18ig.game.screen.x,y
iOSIMPACTとは？
iOS移植ヘの注意点
１）plugin読み込み ２）スクロールメソッド変更
impact 1.18ig.game.screen.x,y
互換あり!!
iOSIMPACTとは？
iOS移植ヘの注意点
iOSIMPACTとは？
iOS移植ヘの注意点
３）タッチエリアの実装
iOSIMPACTとは？
iOS移植ヘの注意点
３）タッチエリアの実装
iOSIMPACTとは？
iOS移植ヘの注意点
３）タッチエリアの実装
iOSIMPACTとは？
iOS移植ヘの注意点
iOSIMPACTとは？
iOS移植ヘの注意点
４）解像度の変更
iOSIMPACTとは？
iOS移植ヘの注意点
４）解像度の変更
iPad
iOSIMPACTとは？
iOS移植ヘの注意点
４）解像度の変更
iPadiPhone
iOSIMPACTとは？
iOS移植ヘの注意点
４）解像度の変更
iPadiPhone
768x1024
iOSIMPACTとは？
iOS移植ヘの注意点
４）解像度の変更
iPadiPhone
768x1024 320x480
iOSIMPACTとは？
iOS移植ヘの注意点
４）解像度の変更
ig.main()に適切な解像度を設定
iPadiPhone
768x1024 320x480
iOSIMPACTとは？
iOS移植ヘの注意点
iOSIMPACTとは？
iOS移植ヘの注意点
５）背景描画のパフォーマンス
iOSIMPACTとは？
iOS移植ヘの注意点
５）背景描画のパフォーマンス•マップのプリレンダリング有効
iOSIMPACTとは？
iOS移植ヘの注意点
５）背景描画のパフォーマンス•マップのプリレンダリング有効•チャンクサイズを256に変更
iOSIMPACTとは？
iOS移植ヘの注意点
５）背景描画のパフォーマンス•マップのプリレンダリング有効•チャンクサイズを256に変更
iOSIMPACTとは？
iOS移植ヘの注意点
５）背景描画のパフォーマンス•マップのプリレンダリング有効•チャンクサイズを256に変更
iOSIMPACTではdraw callの数だけ描画負荷が高くなる
iOSIMPACTとは？
iOS移植ヘの注意点
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更•BGM：aac formatに変更
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更•BGM：aac formatに変更
LEI16@44100
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更•BGM：aac formatに変更
512KB
LEI16@44100
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更•BGM：aac formatに変更
512KB
LEI16@44100
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更•BGM：aac formatに変更
512KB
LEI16@44100
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更•BGM：aac formatに変更
OpenAL
512KBSE
LEI16@44100
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更•BGM：aac formatに変更
OpenAL
512KBSE
LEI16@44100
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更•BGM：aac formatに変更
OpenAL AVAudioPlayer
512KBSE BGM
LEI16@44100
iOSIMPACTとは？
iOS移植ヘの注意点
６）サウンド•SE：caff formatに変更•BGM：aac formatに変更
ファイルサイズに応じて制御を変更
OpenAL AVAudioPlayer
512KBSE BGM
LEI16@44100
Live Demo
One more thing...
One more thing...
Software
Design
2011年9,10月号IMPACT連載!!
Software
Design
2011年9,10月号IMPACT連載!!
Software
Design
Enjoy!!
