Life goes on

何かJavaScriptとかVimとかMacとかに関係してそうな深淵から覗かれる者

第2回 Akiba.js JavaScript ゲーム制作勉強会に参加してます。

JavaScript ゲーム製作勉強会 Vol.2 - Akiba.js
今月の勉強会参加率は異常。という事で、今日はAkiba.js Vol.2に参加しています。
例によってほぼリアルタイムで更新…したいですがハンズオンとか無いよね?
えっと、これまた例によってメモ書きなんで箇条書きでいきます。

本日の流れについて~@hakoberaさん

  • jsで作成したRPGのデモが流れる
  • 懇親会が無料!

noCoreの話~@shibukawaさん

  • @shibukawaさん
  • ngCore
    • iOSのゲームは「忍者ロワイヤル」がローンチ。Androidはもう少しでリリース。
    • JavaScriptで開発可能なゲームエンジン
    • 複数の配信方法を提供している
      • ポータルでダウンロード、app、apkの生成
    • ゲーム用API完備
      • XNAよりもシンプル
    • ソーシャル用のAPIも提供
    • アップグレードの短期サイクルなどを実現する為に、ポータルは重要
  • 開発サイクル
    • ビルドサーバーをnode.jsで立ち上げ
    • サーバーにアクセスするとコンパイルのような処理をして、ビルドする
      • 暗号化なども完備
    • ベイクが終ったら、すぐにブラウザでアクセスできる
    • その後にDevサーバーにアクセスするとすぐにポータル化
      • iOSも半自動でapp化する
  • ゲーム用API
    • シーングラフベースのAPI
    • 2Dのスプライトアニメ→将来は3Dも
    • オーディオはMP3
    • UIはネイティブのUIが使える
      • Web Viewの利用
    • Box2Dベースの物理演算が可能
    • ファイルのR/W
      • ファイル操作・Key/Valueストア
    • ユーティリティ
    • ネイティブの回転などもサポート
  • ソーシャルAPI
  • コードの実例イメージ
    • common.js由来のrequire
    • Javaのようなクラスベースのオブジェクト指向
    • メイン関数を呼び出し
    • フレームの書き変え毎にコンストラクタ・デストラクタを装備
  • アーキテクチャ
  • ngCoreの立ち位置
    • FPSはやはりネイティブよりも出ない
      • 弾幕シューティングなんかは難しいかも…
      • 現在のCanvasなんかよりは速度が出てます
  • ngCore触る
    • Mobage
      • 日本語の解説が充実
  • 必要環境
  • 今後の開発
    • パフォーマンスアップなどなど
  • ngBuilder
    • 実行環境起動(IDE)
    • リソース管理
    • jsデバッガ
    • 将来は、GUIビルダーを
  • ngGo
    • ngCoreのライブラリ
    • 開発期間を1/3に!
      • 解像度差吸収
      • ピンチイン・アウトの2Dカメラ
      • 他色々
  • まとめ
  • 一緒にDeNAで働く人募集!だそうです
  • 質問
    • なぜjs?
      • iOSはweb view、AndroidはV8
        • Appleの規約とJITサポートのせいでweb view…
        • 将来的には、違う技術でやりたい
    • AndroidとiOSの互換性は?
      • 速度の違い
        • 最近はAndroidの方が速いかも!
      • 他はあまりない
    • デバッグはどうしてる?
      • ブラウザでデバッグするのが便利
        • Flashを表示させて、普通にconsoleなどを使う
        • 速度的には速いので快適にデバッグできますよっと
      • ngBuilderでもデバッグできますよ!→出たばっかりらしい
  • ngCoreを採用した経緯
    • 子会社で作ったのというのがある
    • 使いやすいのでshibukawaさんも趣味で開発してみたいくらいらしい
      • 大規模だとやっぱりビルドに時間もかかるけど
    • DeNAが開発してるので、Androidの機種なんかは網羅できるのが強いです

ここでnode.jsがビルド用に出てくるんですね!先日のLL Planetsでのお話に関連するのかと。

IMPACT入門~@Seasonsさん

  • 自己紹介
    • Seasons.NET
      • cocos2dのリリース情報
    • cocos2dのML管理人
    • ソングサマナーとか色々開発、アーティストのコンテンツなんかも
    • ライター業務
  • IMPACTの紹介
    • $99の有償ライセンス
    • 2Dゲーム開発フレームワーク
    • HTML5+jsで開発
    • ゲームに特化したツール
    • Impact - HTML5 Canvas & JavaScript Game Engine
      • 買い切りライセンス
      • 体験版なし
      • ライセンスキーでアクセス
      • 現状Ver.1.18
        • impactライブラリ
        • レベルエディタ
    • HTML5canvasとかAudio、js→input/animation/debugなど
    • レベルエディタ
      • マウスでドローイングしながら、レベルエディット。
        • ドローイングと同時に、コリジョンも設定できる!→これすごいですね
        • 右のオプションで背景やコリジョンを設定
      • レベルエディタ自体がHTML5で作ってるので、chrome推奨
      • タイルをマウスで塗る感じでマップ作成
      • レベルの構築など
      • jsのイベント設定も
    • 連携ツール
      • PhoneGap
        • ゲームパッケージ用
      • Lawnchair
      • TapJs
        • ゲームプラットフォーム提供
      • appMobi
        • web上の開発
      • Zeewe.com
      • Playmosaic
        • ちょっと失念…
  • IMPACTのワークフロー
    • 開発に必要なもの
      • PC→何でも
      • XAMPPP
      • ブラウザ
      • エディタ
        • Textmate推奨でっす
          • Bundleも用意されてます
        • Komodo Editもまあまあ
          • 本家の動画でも使われてる
        • SeasonsさんはVim
    • ワークフロー
      • 素材作成→Entityの作成→レベル作成→テストプレイの流れ
      • 素材作成
        • 使う素材はドット絵が多い
        • Mac→SimpleDotX、win→EDGEでドット絵エディタがオススメ
      • Entityの作成
        • initの中にメンバ変数とか
        • モジュール管理
        • フレーム管理や描画
        • ig.Entityを継承
          • 必要なパラメーターを実装
          • 名前はEntity+ファイル名
      • レベル作成
        • マウスで作成すると自動でエンティティを配置
        • 関連するイベントを連結すると自動でコネクト
          • マウスで設定
        • 保存するとjsになる
      • テストプレイ
        • テストプレイ⇔レベルエディット(ゲームデザイナー)⇔Entity修正(プログラマー)
      • チューニング
        • 新機能:debugモジュール
        • debug用API
          • ig.log
            • メッセージ出力
          • ig.show
          • ig.mark
            • パフォーマンスグラフ表示
      • 配布
        • bake.shを実行
          • game_min.jsを配布(難読化済み)
  • iOSとIMPACT
    • iOSIMPACTとは
      • ソースがそのままiOSで利用可能
      • OpenGLで描画、OpenALでサウンド
      • 30~60FPS
      • アーキテクチャ
      • iOSへの移植方法
        • Xcodoでビルドすると→.appになる
      • 注意点
        • pluginの読み込み
        • スクロールメソッド変更(1.18なら問題無し)
        • タッチエリアの実装→メソッドが用意されてます
        • 解像度の変更
          • ig.mainをいじればOK
        • 背景描画のパフォーマンス
          • プリレンダーさせる
        • サウンド
          • aacに変更する必要あり
  • デモ
    • レベルエディタ
      • すごく直感的にできそう
    • ゲームデモ
      • すげえ滑かに動いてる。FPS高めだなあ
      • Chrome web storeにBuble colaという名前で登録済み!
      • GitHubにソースコードが見られます
  • まとめ
    • Software Design9、10月号で連載!

レベルデザインコリジョン判定なんかもできるってのは凄いですね。

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

  • 自己紹介
    • DeNA
    • フロントエンドエンジニア
    • js、Flash、html
    • 「海賊トレジャー」など作られてる
  • スマホでブラウザゲーム
    • CSS3を駆使
      • メリット→簡単、GPUアクセラレーション、3D
      • デメリット→アニメの経過点取れない
    • Canvasを駆使
      • メリット→複雑でも大丈夫、コリジョン取れる
      • デメリット→むずい、速度が出ない
    • Canvasとは?
      • Cnavasの基礎のお話
        • htmlにcanvas要素、jsで操作
      • 移動・拡大/縮小
      • 回転・save/restore
        • 他に影響するんで、save/restore必須
      • Canvasゲーム基礎
        • ループを一つ作り、前回の描画をクリアして、新しい描画を行う
        • 1秒間にこの処理がどの位やられるか→FPS
        • setInterval/setTimeoutは処理に左右されるので信用できない
      • Canvasのパフォーマンス
        • Galaxy S2が速い
        • iPhone4は遅い
          • 実際の描画のパフォーマンスが遅いのがネック
          • 常にFPSで計測!
      • Canvas高速化
        • 拡大などがされるとパフォーマンスが落ちる(drawImage)
          • 拡大された画像を使う
          • 縮小は大丈夫
        • 座標に小数を用いない
      • マルチデバイス
        • 基本同じ
          • Android2.1はCanvasにバグが!
            • drawImageすると座標やサイズが解像度に依存
            • 回転とかムリ
      • アニメーション
        • フレームベースが基本
          • FPS依存
          • 環境依存
        • タイムベースで考えると環境依存ない
        • setInterval/Timeoutで経過時間を取得するとOK
        • 開始時間・所要時間・初期値・目標値を設定してdurationなどかける
      • Canvasフレームワーク
        • AS3ライク
        • 表示ツリー
        • イベント伝播モデル
        • アニメーション
      • デモ
        • iPhone3GSで30FPS、iPhone4で20FPSくらいでてる
        • 3Dで傾きとってコインを取れるゲーム
          • iPhoneでしか傾き取れない!
      • 質問
        • 一つめは聞き忘れ…
        • 端末のクレームはどう?
        • どっちが速度でる?
          • 今はAndroidの方が速いっす