JS

Akiba.jsという集まりは初めて聞いたのですが、今日はJavaScript ゲーム製作勉強会 Vol.2に出席しています。会場はリクルートさんです。

詳細はid:nakamura001 さんの撮影した動画を参照しましょう。

はじめに / @hakobera さん

• ブラウザが早くなった。node.jsができた。サーバとクライアントどちらもJS
• ブラウザで動くRPG風なデモ的なスライド
• 懇親会もリクルートさんのご好意で無料！

ngCore の話 / @shibukawa さん

• androidは5月に、iOS上は先日「忍者ロワイヤル」
  • ngCoreで何ができるかは「忍者ロワイヤル」をやるとわかりやすい
• ngCore
  • JSで開発、マルチプラットフォーム(android, iOS, Flash, HTML5)
  • 配信方法が豊富(ポータルでDL、appファイルを作ったり)
  • iOS上でもDLによる配布はできるが、規約が問題
  • ゲームAPI。XNAよりシンプル(簡単、機能は少ないかも)
  • ソーシャル用のAPI (友達情報、課金)
• ngCoreでの開発
  • Build Server(node.js)が開発の中心
  • BuildServerにあスマフォからアクセス
  • ビルドされる。圧縮したり画像を2のベキ乗な正方形にしたり。
• ngCoreでの配信
  • androidはmobage Dev site へビルドしたファイルを配置
  • iOSの場合は、mobage Dev site へアップロードしてappファイルを作ってapple storeで配信
• ゲームのAPI
  • シーングラフベースのAPI。2Dスプライト、簡単なポリゴン
  • 将来的には3Dも
  • BGM・SEの再生
  • UI(ボタンやスクロール、リストビュー、WebView(ヘルプ画面などで使ってる)
  • ネットワーク
  • 物理演算(Box2Dベース)。パチンコでBox2Dをフルに使ったゲームが出てるっぽい
  • ファイル操作、Key/Valueストア
  • JSのユーティリティ → オブジェクト指向サポート、Observerパターン、MD5/SHA
  • 回転、ジャイロの検出
• ソーシャルのAPI
  • 課金、プロフィール、友達情報、ブラックリスト、アクセス分析
• CommonJS準拠 (require)
• .subclass メソッドによる継承
• エントリポイントは main
• UpdateEmitter → 画面の書き換えごとにハンドラを呼ぶ。これを使って作る
• シリアライズされた命令列をV8側で作り、ゲームエンジン(ネイティブ)側に渡して実行
  • イベントは逆に、ゲームエンジンから命令列をJSへ送る
  • JS側とネイティブ側が鏡のような関係で動く
• パフォーマンス
  • ネイティブよりは遅い。HTML5よりは早い
  • キャラクターを多く出しても満足いくパフォーマンス(弾幕はきつい)
  • チューニングは日々行われている
• SDKは本家サイトから落としてね
• 環境
  • node.jsさえ動けばいい。Snow LeopardやLinux,Windows
  • node.jsは0.4.7以上。他、iOSやandroidの環境。Flashも開発用限定で使える。
• 今後の内容
  • パフォーマンスアップ、3D、HTML5対応
  • ngServer : JSによるゲームサーバ。(DeNA内ではPerl)
• ngBuilder : 実行環境の起動、JSのデバッガやプロファイラ、リソース管理
  • 将来的にはGUI のレイアウトも
• ngGo → ライブラリ群。開発期間を1/3に
  • スクリーン解像度、2Dカメラ、などなど
• まとめ
  • ngCoreはマルチプラットフォームで動的・開発効率重視
  • ネイティブ+JS
  • 開発効率・パフォーマンスのアップに力を入れる予定
• ngCoreの弱いところ
  • 趣味で個人がゲーム作るのには至ってない → DeNAへの登録が必要
  • 頑張ってオープンにしたい(ただし、米国との絡みがある)
• 質疑応答
  • Q. V8を選んだ理由は？
  • A. iOSはWEB View。UI Web ViewのJSにはJITがない(Safariにはついてるぽい)。Appleの意向に沿っている
  • Q. V8以外の選択肢は？
  • A. (決定に携わってはいないが)C++さえあれば動く点が評価されたのでは
  • Q. androidとiOSとの差は？
  • A. 最近はandroidの方がパフォーマンスがよい。速度以外の差はない
  • Q. デバグの方法は？
  • A. Flash版でブラウザ上で動かし、ブラウザのデバッガを使うと楽。ngBuilderにも機能はある
  • Q. ngCore以外のエンジンと比べて、ngCoreの決め手は？
  • A. 使いやすさだけでなく、ngmoco:) のコンテンツ力を評価したのでは
  • Q. ngCoreはユーザとしてみると使いやすい？
  • A. 使えるなら趣味の開発でも使いたい。コンパイルしなくても裏でホットビルドされて動くのでストレスがない。端末の差にもノウハウが蓄積されてて強い

IMPACT - HTML5 + JavaScriptで作るゲーム開発 / @Seasons さん

• 有償ライセンス $99 円高だから8000円くらいで買えてお得！
• 2D。3Dは予定なさそう。HTML5 + JS。ゲームに特化。レベルエディタ、連携ツール。
• IMPACT。"impact javascript"でググる*1
• 購入するとライセンスキーを取得でき、サンプルやgithubのレポジトリへアクセスできるようになる
  • version 1.18 → impact ライブラリ、 weltmeister(レベルエディタ)
  • Animation, Entity, Collision, Soundなどの機能。
  • 最近Debug 機能が追加された
  • どのブラウザでも動作
• Weltmeister
  • タイルを塗りつぶしてマップを作る。collisionも自動設定
  • 背景レイヤも設定できる
  • イベント設定ができる
  • Chrome 推奨 (Weltmeisterはhtml5で書かれている)
• 連携するツール
  • PhoneGap (iOS, androidゲームのパッケージング)
  • Lawnchair : ドキュメントストアライブラリ(JSONで保存)
  • TapJS : ゲーム配信用のプラットフォーム
  • appMobi : web上でiOS、 androidアプリを作れるサービス
  • Zeewe.com : クロスプラットフォームでのappstore。自分のゲームを販売できる
  • Playtomic : 情報解析やスコアボードの提供
  • 他のjsとの連携 → tween.js(緩急のアニメーション), box2d.js, director.js (シーン管理機能。cocos2dのCCDirectorに近い)
• 開発環境
  • PC(Windows, Mac, Linux...)
  • Apache (XAMPP推奨)
  • ブラウザ
  • テキストエディタ → textmateがおすすめ。またはKomodo Edit。個人的にはvim
• textmate
  • $57
  • RoRの人は必須のエディタらしい？
  • カスタマイズ機能 → tmbundle・IMPACT用プラグイン
• 開発フロー
  • 素材作成 → Entity作成 → レベル作成 →テスト
  • Entityまでできれば、レベル作成とテストをひたすら繰り返す
• IMPACTはレトロゲームを作るのに最適なフレームワーク
• ドット絵
  • SimpleDotX (OS X)
  • EDGE (windows)
• Entityを作る
  • モジュールロード → ig.module 〜 .requires 〜 .defines
  • .extend で継承。クラスの名前は Entity + ファイル名
  • initで初期化、updateでフレーム処理
  • draw: カスタム描画, check: カスタム当たり判定
• レベルの作成
  • タイルの描画
  • 関連するイベントをコネクトしたり、コリジョンサイズを変えたり
  • 最終的に .js にまとまる
• ゲームデザイナとの分業
• チューニング(新機能)
  • Debugモジュール → パフォーマンスグラフ、Entityのデバッグ、背景マップのデバッグ
  • 利用方法は、requireするだけ
  • コリジョン、速度ベクトル、エンティティ名やターゲットの表示
  • フレーム数を見れる
  • ig.log (console.logの代替)、ig.show (デバグパネルへ表示できる)
  • ig.mark (パフォーマンスグラフに表示される。毎フレーム呼んだりしないように)
• 配布
  • bake.sh によってコンパイル → game_min.js を配布
  • 誤ってフォルダごとアップするとIMPACTのソースが見られてまずいので注意
• iOSIMPACT
  • キーパッドとゲームをiOS上に表示
  • ソースがそのまま使える
  • OpenGL, OpenAL, 30-60FPSをキープできる
  • UIKitなどとも組み合わせられる
  • OpenGL + OpenAL + JavaScriptCore を iOS上で動かす
  • iOSIMPACT用のXcodeProject が配布されるので、これを使ってビルドして *.appを作る
  • 作品例 → Biolab Disaster, Drop JS
  • plugin 読み込みが必要
  • 1.17を使うなら、 スクロールメソッドをig.game.setScreenPos(x, y) を使う必要あり
  • bindTouchArea によってコントローラ部分を実装
  • 解像度が複数あるので、設定のし直しが必要
  • 背景描画のチャンクサイズを256にして、パフォーマンスをあげる
  • サウンドはフォーマットを変更する必要あり → afconvert する
  • サウンドは512KBを境に、OpenALを使うか使わないか決まる。
• Software Design 9月号と10月号にIMPACTの連載あるよ！
• デモ
• 10分くらいでiOSに移植ができる

スマホ向けCanvasゲームの作り方 / @chikathreesix さん

• 関連作品 → 海賊トレジャー、住み着き妖精セトルリン
• ブラウザゲーを作る
  1. CSS3を駆使
     • 簡単、GPUアクセラレーション(iPhone)、3D
     • アニメの経過点が取りにくい(衝突判定など)
     • →シンプルなアニメーション、HTMLベースなものに向いてる
  2. Canvasを駆使
     • 自由度は高いが、面倒。CSS3ほどのパフォーマンスが出ない
     • →複雑なアニメーション、衝突判定が必要なアクションゲームに向いてる
• Canvasとは？ → 画像描画のためのHTML要素
  • canvas.getContext().drawImage 的な使い方
  • 座標はdrawImageに直接指定するか、translateにて指示
  • 拡大縮小はdrawImageに直接指定するか、scaleにて指示
  • 回転はrotateで指示。変換行列は残るので、.saveと.restore と合わせて使った方がよい
• アニメーション
  • setIntervalにてclearRect + drawImage → 処理が遅いと指定した秒ごとには呼ばれないので注意
  • FPS → 1秒間にsetInterval(描画)が何度走るか
• iPhone4遅い(iPhone3GSよりも) → ディスプレイに描画するところが遅い(イベントループの周りが遅くなる)
• Canvasの高速化
  • drawImageで拡大すると重い → すでに拡大されてる画像を使う。または、予めcanvasに拡大してdrawImageしてき、それを使う
  • 縮小は問題ない。拡大を避ける
  • 座標に小数を使わない ~~(0.001)
• Android 2.1 のキャンバスのバグ
  • scale, rotate, translate あたりの挙動がおかしい → 回転はあきらめる
• アニメーション
  • 環境によってFPSが変わってしまう
  • タイムベースでフレームを呼ぶ (描画を省く)
  • currentTime で時刻を取得して、その値から変化量を算出する
• Canvasフレームワークを作った
  • AS3ライク、表示ツリー、イベント伝播モデル、アニメーション
• デモ : 実記の物をカメラで投影。iPhone3GSで気をつけて作れば30FPSくらい出る
• 質疑応答
  • Q. レイヤは何個？
  • A. 1個しか使っていない
  • Q. 再描画は全画面？
  • A. 毎回全領域を描画している
  • Q. 端末の差異によるクレームってあった？
  • A. 特にない。android 2.1が一番苦しかった
  • Q. iOSとandroidでパフォーマンスは？
  • A. androidの方が出ている