さいたまiPhone開発勉強会に参加してきました / IMPACTについて
7/30 13:00-17:00
さいたまiPhone開発勉強会
http://atnd.org/events/17521
http://togetter.com/li/168360
【発表者と発表内容】
・@Seasonsさん ：IMPACT入門 ・@ajinotatakiさん ：cocos2d事例編 HungryMasterの実装から ・@corosuke_kさん ：Coronaで始めるiPhoneアプリ開発 ・@yoichinejiさん ：○○○とおまけてきなもの
ものすごく内容が盛りだくさんな勉強会でした。
Togetterも500tweetほどまとめられていますし、
私が勉強会中にメモしていたテキストファイルも500行近くになっています。
さすがに記事1つで流してしまうにはもったいない内容でしたので
数日に分けて更新できたら良いなと思います。
勉強会後に懇親会があり、二次会のカラオケがあり、
気づいたら翌朝までカラオケしていたメンバーでファミレスに行って
朝食を取っていたくらいなので、結構疲れましたが楽しかったです。
少し前までなら、勉強会参加したりとか、さらにそのあとに
懇親会や二次会まで参加することなんてありえなかったわけですが
最近はいい感じに吹っ切れはじめて来たと思います。
さて、肝心の内容に入ります。
なんと1人につき1時間ほどの発表内容となっており、これだけ深い内容を
会場費だけで共有させて貰えるとは、すごい時代だな、と。
尚更そういった講演を聞いた以上は自分なりにまとめたりしなくては。
HTML5+JavaScriptで作るゲーム開発
※内容について、ほとんどメモは取っていたんですが後日@Seasonsさんからスライドの内容が共有頂けると思うのでそのあたりは省こうと思います。
自己紹介
@SeasonsさんSeasons.NETでテクニカル情報の翻訳などを行われている。
http://d.hatena.ne.jp/Seasons/
iOSでの代表作
・スクエニのiOS用アプリなど
(CRYSTAL DEFENDERS http://itunes.apple.com/jp/app/crystal-defenders/id300186798?mt=8)
・倉木麻衣さんのアプリや、JUJUアプリのディレクションからプログラムまで
ライター業務
・書籍3冊、iPhoneマガジンやSoftwareDesignへの寄稿など。
IMPACTの紹介
・有償$99ライセンスが必要(体験版無し)→ 購入後のライセンスキーでリソースアクセス
→ リソースページでサンプル、ライブラリ配布
→ 最新版は、githubで取得可能（ライセンス必須）
（作者の更新が少し遅くなってきている）
・2Dゲーム開発フレームワーク
・HTML5+JavaScriptで開発
・ゲームに特化したクラス群が用意されている
・高度なレベルエディタが付属している
・連携ツール
http://impactjs.com/
もしくは、"IMPACT javascript"などで検索する
現在の最新版は、IMPACT version 1.17
impact ライブラリと、weltmeister(レベルエディタ)が付属している。
2Dゲーム開発に特化
ゲーム制作に必要なクラスを用意HTML5のAudio,Canvasを利用
どのブラウザでも動作可能
→ AudioについてはChromeでも一部動かない場合がある。
Weltmeister(レベルエディタ)
・GUIで様々なパラメータを設定出来る・HTML製(ブラウザ上で動作)のため、GoogleChromeを推奨
・タイルをマウスで塗る感じでマップ作成
・ゲームレベルの構築、バランス調整をグラフィカルに行って行く
・コリジョンやイベントの設定も可能
※レベルエディタと言っても、一般の人（私含む）には馴染みが薄い用語だけど
要は簡易な操作でステージの難易度調整を行うツールなどと理解しておけばよさそう。
プログラマー以外のディレクターやプランナーでもそれを使って構成の調整ができたり。
連携ツール
・※本家サイト Toolsリンクよりtween.js(動きのアニメーションを管理、滑らかな動きをつけたい場合などに)
box2d.js(物理エンジン)
director.js(Cocos2dのように、Sceneで管理などを行う)
・PhoneGap
iOS、Android用のゲームへパッケージするために
・Lawnchair
JSONベースのドキュメントストア。セーブデータの保存を行うときなどに
・TapJS
ゲームプラットフォームの提供。ゲームの公開を行う際などに
・appMobi
Web上でiOS,Androidアプリ作成
・Zeewe.com
Cross Platform用app store
・Playtomic
アナリティクス(ゲームのトラッキング、どういう風に遊んだか)を行いたいとき。
スコアボードの提供なども
IMPACTのワークフロー
・開発環境の構築・IMPACTの作法
・配布の仕方
開発に必要なもの
・PC(Win, Mac, Linux...)
ブラウザ上での開発になるため、特に機種を問わない
・XAMPP
基本的にはApacheしか使わないが、サーバー構築のため
・ブラウザ
ChromeかSafariを推奨。Operaも4以降ならばある程度は動くとのこと
・テキストエディタ
おすすめエディタ
・textmate
http://macromates.com/
有償 : $57( 約4,500円 )
軽いため、Web業界では超有名エディタ
Ruby on Rails使い必須
カスタマイズ機能が豊富
→ tmbundle
http://github.com/paularmstrong/ImpactJS.tmbundle
・Komodo Edit
無償(Proでなければ)
ちょっと起動が遅い
補完をデフォルトで装備しているが、精度は低い
カスタマイズ可能
→ 何故これを紹介するのかと言うと、本家IMPACTにあるチュートリアル動画で利用されているため
開発ワークフロー
1.素材作成→ IMPACTで使う素材は、ドット絵が多いので以下のようなソフトを利用する
Mac : SimpleDotX http://www.studioshin.com/simpledotX.htm
Win : EDGE http://takabosoft.com/edge
2. Entityの作成
・エンティティとは？
→ゲームオブジェクト。キャラクターであったり、ブロックであったり。
出てくるもの全てを指す用語
・コーディングは、C++でゲームを作っていくのに似ている
・エンティティは、ig.Entityを継承した上で必要なパラメータを実装していく。
・名前は、Entity+ファイル名
記述するコード
・init : 初期化コード
・update : 毎フレーム処理するコード(キー入力や、移動処理など)
・draw : カスタム描画コード
・check : 当たり判定
etc...
3. レベル作成(WeltMeister)
※たぶんここは、後日公開のスライドで絵と一緒に見るべき
・レベル作成とは？
→ 難易度調整や、ステージの構成を行う。
例えばマリオなら、ここでクリボーが出てくるとか、
ここに当たったら隠しブロックが出るとか、ここがゴール、とか。
・マウスでドラッグ操作などを行いタイルを描画していくと、コリジョンが自動で設定される
・作成したエンティティを配置していく
・関連するイベント同士をコネクト
・イベントのコリジョンサイズの設定（マウスでドラッグして位置を調整）
→ 「*.js」として、レベルデータを保存
4. テストプレイ
ここまでの内容を実際にプレイしながら確かめてみて、調節する。
・レベルの調整
- バランス調整
- マップ、エンティティの調整
→ 作業分割できるのでプランナーや、レベルデザイナーの仕事として分業出来る
・エンティティの調整
- 動き、パラメータの調整
- 入力、描画の修正
→ こちらは基本的にプログラマーがやるしかない
5. 配布(Publish)
・Toolsフォルダにある、「bake.sh」を実行することで、
game_min.jsというゲームファイルが出来上がる
→ 全てのソースコードを連結して、高速化を図ることができる
→ 同時にコードが圧縮されることで難読化される
iOSとIMPACT
・iOS IMPACTとは？ブラウザ上でしか遊べないIMPACTゲームをiPhone上で遊べるようにするもの
・特徴
ソースコードがiOSでそのまま利用可能
OpenGLで描画処理
OpenALでサウンド処理
30〜60fpsのフレームレートでゲームが実行出来る
頑張ればUIKitなどiOS独自の実装も可能
・アーキテクチャ
iOSの上にJavaScriptCoreが動作している。
→ インタプリタ的に理解して、Canvas は OpenGL 、 Audio は OpenAL で動作させる
（構成的には、Titaniumと同じ？）
・iOSの移植方法
iOSIMPACT Xcode Projectが用意されているため、
そこにIMPACTで作ったソースコードを突っ込むことでビルド可能。
ネイティブアプリケーションなので、AppStoreで販売可能
例)
・Biolab Disaster http://itunes.apple.com/jp/app/biolab-disaster/id433062854?mt=8
・Drop JS http://itunes.apple.com/us/app/drop-js/id433062287?mt=8
・iOS移植への注意点
※後日配布される？ スライドではソースコードサンプルも付属しているはず
1.Plugin読み込み
"plugins.ios.ios"というプラグインの読み込みを追加するのが必須
2. スクロールメソッド変更
通常ではig.game.screen.x.yだが
→ iOSIMPACTでは、ig.game.setScreenPos(x,y)
3. タッチエリアの実装
→ if(ios)でig.input.bindTouchAreaを実装してやる
( 通常では、ig.input.bindでマウスの左右キーなどを設定する )
4. 解像度の変更
→ ig.main()で一行いじるだけだが、iPadやiPhoneとブラウザでは解像度が違う。
5. 背景描画のパフォーマンス
・マップのプリレンダリング有効
・チャンクサイズを256に変更
(iOSIMPACTではdraw callの数だけ描画負荷が高くなる)
6. サウンド
→ SE : caff format に変更
→ BGM : aac format に変更
フォーマットの変更については、Macに標準で付いているafconvertで行える。
512KB以下のファイルはSE、それ以上のファイルはBGMとして利用している
SE は OpenAL 、 BGM は AVAudioPlayer を利用して再生する
デモ
→ Link with Collitionをオフにしてブロックを配置することで、
通過出来るブロックなども配置可能
・iOSIMPACTは、現在 version 0.8
・CanvasやAudioをObjective-Cで書き換えたものになる。
・ゲーム部分は全てjsファイル
・移植時間は、慣れれば5〜10分程度で行える
One more things...
→ SoftwareDesign IMPACT 2011年9,10月号IMPACT連載(トータル12ページくらい)
レベルエディタでは、現在Main、Background、Collition、Entityの
４つ程度しかレイヤー（フレーム）が無い。
多くの画像を重ねようとすると、工夫が必要。
