読者です 読者をやめる 読者になる 読者になる

FUJILOG

見た、聴いた、触れたこと。 動かしたもの、書いたもの。 ウェブとリアルの備忘録です。

「JavaScript ゲーム製作勉強会 Vol.1」参加ログ

javascript event
巷で話題の9leap凄いですね、未来の若手プログラマの腕試しできる場を提供するという視点が素敵です。

KAYACさんがjsdo.itでブラウザ上のjavascript実行環境を提供した先行例に継ぎ、実行環境&ユーザ・製作者相互評価機能&ゲーム開発ライブラリenchant.jsまで合わせて用意されるという至れり尽せりっぷり。

と、9leap礼賛はまたの機会として、5月15日(日)開催の「JavaScript ゲーム製作勉強会 Vol.1」へ行ってきました。

場所は毎度お世話になっています大森ニフティさん。

土日大工で何つくろうの前に選択肢を広げたいという欲があったので、今回のイベントは素材集めとしても非常に有意義なものでした。

以下、毎度ながら自分用メモ残します。

***
司会・講演者:@hakoberaさん

ゲームの構成要素
・Soft Realtime 時間遷移
・Interactive プレイヤー
・Agent Based アイテム・オブジェクトの相互作用
・Computer Simulation  


コンピュータ内の新世界
独自時間軸、登場人物、ルール

・3DCG
・AI
・物理演算
・Agent間通信
・UI設計
・巨大NW

JS利点
・動的型付け
・プロトタイプベース

GoogleChrome V8
ブラウザベンダ間で

V8/nitro/spider monkey..
かつての数十倍速度に


考慮すべきポイント
・Logic 
・Graphic Canvas/WebGL/SVG/DOM
・Sound
・Movie
・NW
・Input

用途に合わせた仕組み選び
・DOM
Canvas/WebGL

参照:SVG Girl
15 flameならリアルタイムでもいける


管理すべき項目
・タイムライン
・入力系
・シーン
・リソース
・イベント
・描画
・サウンド

参照:アクアリウム


JSの死角
ハードウェア非サポート
ジョイパッド等も

カメラ
StreamAPI

Audio API/音鳴らす制御系は地味,互換性ない
(Chrom:web audio api/ FF:AUdio data api)

スマホ
audio鳴らすと全画面再生になってしまう

PCよりCPU貧弱
iPad2はPCより描写10倍遅い…
GPU描写なら早いが、Canvasでは遅い

コーデック問題(audio
MP3
Ogg

(video
H264
Ogg Theora
WebM


PCだけならFlashに絞るのも有り。

IE9 XPでは動かない
IE6,7,8 Canvas動かない

Chrome Web Storeみたいに割り切りとか。(Google I/O


Game Loop
初期化してGameFrame書き換え
1秒間繰り返しFPS

C言語なら…
function main(){
    init();
    while(alive){
        var key = getInput();
        processInput(key);
        move();
        draw();  
    }
    exit();
}

JSなら
function main(){
    init();
    setIntarval(function(){
        var key = getInput();
        processInput(key);
        move();
        draw();  
    },2000);
}



window.addEventListner('keydown',KeyManager.keydown)
でgame.js呼び出し

timer = setInterval(mainloop,INTERVAL)
反復

→X

Y
(上に進める際は、v*(-1))

myloop内で当たり判定等…実装

300行ほどで簡単なゲームも実現!


巷のJSライブラリ

enchant.js

Canvas
  sc
  lime
  easel
  imapct

WebGL
  GLGE
  Three.js


データ駆動開発
ライブラリ

組み込みスクリプト
Unity
Server Side JS
Node.js

GWT
Javaで書いて、JSにコンパイル

参照:playwebgl/games/Quake2



JSでの実務現場レポート
講演者:@souさん
  web app /game engineer

実務
 Flash 動かん…
 HTML5で開発しなおす

農園ホッコリーナ for iOS
mbgeの女性人気No1

DeNA@スマフォ

海外
Bandit Nation(CSS3
Pirate Nation

国内
怪盗ロワイヤル…
海賊トレジャー
農園ホッコリーナ


アクション部はCanvas

忍者ロワイヤル
ngCore(フレームワーク
JavaScript
クロスプラットフォーム


農園ホッコリーナ for iOS
iphone
パフォーマンス
3G回線

作ってみて…

農園の様子
アニメーション表現
Canvas/Sprite Imageで位置ずらしパラパラ漫画)
320*386px
FPS(@iphone4

iphone3GS > 4(Retina対応で描画パフォ落ちる) > iphone3(HWスペックつらい)

1Mapに30〜40オブジェクト数
11〜40KB/枚
トータル300〜400KB

通信
XHR

遊んでもらえるものは作れそう…

描画
3GのHW性能…チューニング次第
Retina対応…難度高い(データ量で解像度きつい


wi-fiならさくさく
3G回線でもそこそこ

電車内移動中つらい

XD(クロスドメイン)通信ハンドリング
XHR2待ち
JSONPでは待機ビジーで通信こける


通信
サイズ減らす
読み込まない工夫が必要

キャッシュ技術使えば…

HTML5で使えるキャッシュ
・Application Cache …魔人ウォーズ(最初にすべてDLする場合有効だが、個別DL系は厳しい
・local Storage(2.5MB ドメインに対して上限
・sessionStorege(2.5MB
WebGL SQL Databese(5-50MB


Retina対応
解像度4倍
データ量2倍強
iphone4 描画性能で限界


高解像度対応はいずれ通る道
BMPデータをオンラインで←つらい

キャッシュ、データ保持強化
データフォーマット(ベクターで受け取るとか、SVGでCancasレンダリング、SWFが適当?

SWF→JSコンパイル系ライブラリなら使える?

新しいテーマ
WebGL
XHR2,etc

画像ファイル系:ガラケースマホへ圧縮



「玉転がしゲームで学ぶUnity入門」
講演者:@nakamura001さん

ヒエラルキーブロック
・画面表示される
プロジェクトブロック
カメラビューブロック

GameObject作成

マテリアル作成
作成後、ヒエラルキーブロックへD&D

Floor 色変更 
ライト追加(デフォでは無いので

Player
玉を作成

Player Material

Projectに画像ファイルをProjectブロックへD&D
で、Playerに追加で反映される

Main CameraのInspecterのPosition変更

Projectで
JS/C#/BooScript(pythonっぽい?)
選んでPlayerActionと変名(PlayAction.js)

スクリプト
var x = Input.GetAxis("Horizontal)*Time.deltaTime*power; …(※deltatime処理オチ等への遅延時間


玉転がし…なので物理エンジンを使おう

Player選択後、CreateObjで→CommponentのPhysics選択
右クリック→Import packageからでも可能


JSを変更
rigidBody.AddForce(x,0,z)として物理エンジンのパラメータを与える

Fireのボタン操作でY軸にAddForceしてジャンプ機能追加


HierarcyにCubeを追加”Goal”と命名
ProjectでGoalMateialとしてパラメータいじって、Hierarcyの”Goal”CubeにD&D

GUI Textを追加
名前をGame Clearとして
Projectで、JS追加”GoalAction”

var player: GameObject;
var gameClear: GameObject;

function Start(){
    player = GameObject.Find("Player);
    gameClear = GameObject.Find("GameClear");
    gameClear.active = false;//初めは隠す
}

sendMessage()で他オブジェクト内の関数をCall可能



X360 Kinect hacks
KinectどうしのNW対戦」
講演者:@ndruger

利用技術
node.js
websocket(少ない帯域で通信&Server Push可能
webglOpenGL ES2.0がブラウザで使用可能
VR920(HMD)…映像&地磁気センサーで見ている方向取得可能
Kinect…モノヒトの位置トレースできる


リモートNode.js

Webブラウザ(WebGL描画
ローカルNode.js

TCP
顔の向き(iWear SDKアプリ
部位のXYZ(OpenNlアプリ


使用ライブラリ
Sence.js(WebGLライブラリ,Tree構造でわかりやすい
glMatrix.js(3Dの演算、手の伸縮・角度計算
Node.js(サーバ、クライアントの各Player計算
Sochet.IO(WebSocketのラッピング、WebSocket未対応のAndroidへの操作対応


Kinect+ブラウザの未来(妄想で

ブラウザの機能としての規格化
・簡単導入→規格化
Scene.jsのObject変換が手軽になる
・誰でも容易に何かを触ったりできる
フィードバック用の安価なハードウェア広まる
→物体を触れる装置の普及、振動を起こす等も


ダミープレイヤー
(一旦動いて撮影したデータ再生による

CPU使用量からKinectゲーム(30fps)をMMOとしてやるのは厳しい

3人以上のエミュレート
・2〜5人くらいで誰かが一時的にサーバ立ててゲームするのが良い
・パケット量を削減してないと4人でも6Mbps消費

ブラウザ+KinectHMDを使って、すごい没入感世界が大掛かりな機材なし、体験共有できる
SecondLifeでは視覚以外の体験もあれば良かった


以上がLTメモです。


二部ハッカソンは私都合により参加できませんでした、残念…。