Ember.js Tokyo event 2014/09/22 (Japanese)

An example of game developing
with Ember.js and WebGL
Yuki Shimada
2014/09/22

About me
• 東邦大学でコンピューターグラフィックスを専
攻。
• 東大のベンチャー企業で、PS3向けのゲーム
エンジンの開発に従事。
• 株式会社ソピア(現アクセンチュア)にSEとして
勤務。
• 某VFX Studioにて、レンダラーの開発と
WebGLサイトの開発案件を担当。
• 現在はフリーランス(Web & CG).

Demo
• ゲームプレーヤー
http://youtu.be/0iRTk_2Wjp8
• マップエディター
http://youtu.be/u6F3wGJpnUo

My Web Service
• Web上で簡単にRPGが作れるWebサービス。
• 想定開発者をベーシック開発者とアドバンスド開発者の２つに分け
ている。
• アドバンスド開発者はRPGをゲームシステムの段階から開発する
ことができる。
– ゲームコードはTypeScriptで記述してもらう。
– 将来的には、ノード接続によるビジュアルプログラミングに対応したい。
– UIのカスタマイズもSCSSで可能。
• ベーシック開発者は、アドバンスド開発者が開発したゲームシステ
ムの中から好きなものを選び、その枠内でマウス操作だけで簡単
にRPGが作れる。

本Webサービスの構造
• ゲームプレーヤー部分と制作ツール部分の２つ
から構成される。
• 全体がRuby on Rails上で構築されている。
– RailsのView、Controllerは殆ど使っていない。
– Ember.jsで全てを制御。Railsはモデルデータを提供す
るだけ。
– ビューの記述にはEmblemを使用。
http://emblemjs.com
– RailsからのEmberへのモデルデータ伝達には、
Ember DataとActiveModel::Serializersを利用。
• 参考URL：@ursmさんの以下のサンプルが参考になりました。
http://ursm.jp/blog/2013/12/03/ember-js-and-rails/

使用言語
• 制作ツール側はCoffeeScriptで、ゲームプレー
ヤー部分はTypeScriptで記述。
• CoffeeScript（制作ツール）、TypeScript（ゲー
ムプレーヤー）双方から、Ember.jsを操作。
• 全体のRouter定義はCoffeeScript側で行って
いる。

Using of Ember.js
• UI handling
• Data transfer of Rails Model -> Ember Data
• Data transfer of Ember Data -> WebGL
• Ember.js Observer and WebGL
• Computation of Game character’s parameters

UI handling
• UIはHTML(Emblem)+CSS(SCSS)でできている
– クリエーターはSCSSで見た目をカスタマイズ可能
• スクリーン(‘uiScreen’)->テーブル(‘uiTable’)
の２段階構造のモデルでUIを管理。
• スクリーン＝Ember.jsのテンプレート
Ember.jsでテンプレートを切り替えて、スクリー
ンの切り替えをしている。
• スクリーン配下のテーブルの表示・非表示は
jQueryで。

テーブル（’uiTable’） uiScreenとuiTable
スクリーン（’uiScreen’）

Data transfer of
Rails Model -> Ember Data

Between Rails and Ember Data
複雑または構造の変更が多いデータは、JSONテキストデータとしてRailsモデルのカラ
ムに保存。Ember DataのTransformを使い、JavaScriptでevalして、Emberオブジェクト
化している。
Definition of Ember Data Model A fixture of Rails Model (Factory Girl)
trait :as_2 do
id 2
ui_screen_id 1
screenIdentifier 'battle'
tableIdentifier 'character_0'
tableName '０:'
tableName_binding 'Tool.EScenarioCharacter.0.name'
selectable false
trs "[" +
"{"+
"'columns':[" +
"{" +
"'item':'HP:'," +
"'binding': 'Tool.EScenarioCharacter.0.hp'" +
"}" +
"]" +
"}," +
"{"+
"'columns':[" +
"{" +
"'item':'MP:'," +
"'binding': 'Tool.EScenarioCharacter.0.mp'" +
"}" +
"]" +
"}" +
"]"
end
var uiTableDefinition = {
screenIdentifier: DS.attr('string'),
tableIdentifier: DS.attr('string'),
tableName: DS.attr('string’),
tableName_binding: DS.attr('string'),
selectable: DS.attr('boolean'),
trs: DS.attr('uiTableTrs'),
…
};
Transform of Ember Data Model
window.Tool.UiTableTrsTransform =
DS.Transform.extend(
{
deserialize: function(value:any) {
var json:any = null;
eval("json = " + value);
return Ember.create(json);
}
});

Question : Ember Dataモデルの
一対多関係をRailsのモデルからどう復元する？
• RailsとEmber Dataの一体多のデータ表現では、一部異なる点がある。
• Railsでは、子モデルが親モデルの参照を持つだけで、親モデルから子モデルのリストにアク
セス可能。
• Ember Dataでは、親モデルが子モデルのid配列を明示的に持つ必要がある。
• 上記の違いがあるため、両者のやりとりには変換処理が必要。
App.Post = DS.Model.extend({
comments: DS.hasMany('comment', {async: true})
});
{
"post": {
"comments": [1, 2, 3]
}
}
App.Comment = DS.Model.extend({
post: DS.belongsTo('post')
});
{
"comment": {
"post": 1
}
}
class Post < ActiveRecord::Base
has_many :comments
end
create_table ”posts", force: true do |t|
end
class Comment < ActiveRecord::Base
belongs_to :post
end
create_table ”comments", force: true do |t|
t.integer "ui_screen_id”
end

Question : Ember Dataモデルの
一対多関係をRailsのモデルからどう復元する？
Ember Data Rails Model
var uiScreenDefinition = {
var uiTableDefinition = {
screenIdentifier: DS.attr('string'),
tableIdentifier: DS.attr('string'),
tableName: DS.attr('string’),
tableName_binding: DS.attr('string'),
selectable: DS.attr('boolean'),
trs: DS.attr('uiTableTrs'),
…
};
identifier: DS.attr('string'),
config: DS.attr('uiScreenConfig'),
uiTables: DS.hasMany('ui-table')
};
Definition of
‘uiScreen’
which has
many uiTables
Definition of
‘uiTable’
which belong
to ‘uiScreen’
create_table "ui_screens", force: true do |t|
t.string "identifier"
t.text "config"
t.text "uiTables”
end
class UiScreen < ActiveRecord::Base
has_many :ui_tables
end
create_table "ui_tables", force: true do |t|
t.integer "ui_screen_id"
t.string "screenIdentifier"
t.string "tableIdentifier"
t.string "tableName"
t.string "tableName_binding"
t.boolean "selectable"
t.text "trs”
end
class UiTable < ActiveRecord::Base
belongs_to :ui_screen
end

Answer : RailsのControllerでEmber Data
向けにhas many id配列を生成する
class Api::UiScreensController < ApplicationController
skip_before_action :verify_authenticity_token
def index
uiScreens = []
UiScreen.all.each do |uiScreen|
uiTablesStr = "["
uiScreen.ui_tables.each do |uiTable|
uiTablesStr += uiTable.id.to_s + ",“
end
uiTablesStr.chop!
uiTablesStr += "]"
uiScreen.update_attribute(:uiTables, uiTablesStr)
uiScreens.push(uiScreen)
end
jsonHash = JSON.parse(uiScreens.to_json) for item in jsonHash
item["uiTables"] = eval(item["uiTables"])
end
jsonWrapper = {}
jsonWrapper["ui_screens"] = jsonStr = jsonWrapper.to_json
jsonHash = JSON.parse(jsonStr)
render :json => jsonHash
end
uiScreenにbelong to して
いる全てのuiTableのidを
配列文字列に追加。
Ex:”[1, 2, 5, 6, 7]”
そして、JSON化して出力
{
"ui_screens": [
{
"config":
"{'firstUI':'command','hiddenUIs':['physics', 'magic',
'target', 'magic-fake'],'calculatePosition': true}",
"created_at": "2014-09-08T02:07:53.215Z",
"id": 1,
"identifier": "battle",
"uiTables": [1, 2, 5, 6, 7]
}
]
}

Data transfer of
Ember Data -> WebGL

WebGLへのデータ受け渡し
• WebGLを直接触っているのではなく、Three.jsを
利用。
http://threejs.org
• tmlibというゲームライブラリを使用。
http://phi-jp.github.io/tmlib.js/
• tmlibはthree.jsと統合されている。
• 今回は、マップの描画を例に取って解説。

マップの描画のための
マップデータの受け渡し
Ember Data
Tool.PlayRoute = Ember.Route.extend
model: (params, transition) ->
return Ember.RSVP.hash({
map: @store.find('squareGrid3dMap', params['id'])
textures: @.store.find('squareGrid3dMapTexture')
tiletypes: @.store.find('squareGrid3dMapTileType')
uiScreens: @.store.find('uiScreen')
uiTables: @.store.find('uiTable')
})
Map Data (Factory Girl)
trait :as_2 do
Rails
id 2
name 'デバッグテスト'
width 5
height 5
type_array "1 N,1 W,1 N,1 W,1 Wn" +
"1 N,1 W,1 N,1 W,1 Wn" +
"1 N,1 N,1 N,1 N,1 Nn" +
"1 W,1 W,1 N,1 W,1 Wn" +
"1 W,1 W,1 N,1 W,1 Wn"
height_array "0 1,0 1,0 1,0 1,0 1n" +
"0 1,0 1,0 1,0 1,0 1n" +
"0 1,0 1,0 1,0 1,0 1n" +
"0 1,0 1,0 1,0 1,0 1n" +
"0 1,0 1,0 1,0 1,0 1n"
end
Tool.SquareGrid3dMap = DS.Model.extend
name: attr('string')
width: attr('number')
height: attr('number')
type_array: attr('string')
height_array: attr('string')

マップの描画のためのマップデータの
受け渡し
Tool.PlayIndexRoute = Ember.Route.extend
model: ->
@modelFor('play')
afterModel: (model, transition)->
window.WrtGS.main(model)
function systemMain(err:any, args:any){
window.WrtGS = new
system.System(args);
}
module system {
export class System {
public main(model:any) {
this.map = new map.Map(model.map.get(‘type_array’),
model.map.get(‘height_array’),
model.texture.get(‘gametex_url’));
trait :as_2 do
id 2
name 'デバッグテスト'
width 5
height 5
type_array "1 N,1 W,1 N,1 W,1 Wn" +
"1 N,1 W,1 N,1 W,1 Wn" +
"1 N,1 N,1 N,1 N,1 Nn" +
"1 W,1 W,1 N,1 W,1 Wn" +
"1 W,1 W,1 N,1 W,1 Wn"
height_array "0 1,0 1,0 1,0 1,0 1n" +
"0 1,0 1,0 1,0 1,0 1n" +
"0 1,0 1,0 1,0 1,0 1n" +
"0 1,0 1,0 1,0 1,0 1n" +
"0 1,0 1,0 1,0 1,0 1n"
end
trait :as_1 do
id 1
name 'メタル'
gametex_url ‘metal.jpg’

あとは、ただのテキストデータなので、独自マッ
プテキストフォーマットを解析し、Three.jsのジオ
メトリ作成、テクスチャ画像割り当てを行う。
// 1頂点目
geom.vertices.push( new THREE.Vector3(x-1, this.maxCeilingHeight, y) );
// 2頂点目
geom.vertices.push( new THREE.Vector3(x-1, ceilingHeight, y) );
// 3頂点目
geom.vertices.push( new THREE.Vector3(x-1, ceilingHeight, y-1) );
// 4頂点目
geom.vertices.push( new THREE.Vector3(x-1, this.maxCeilingHeight, y-1) );
// 表三角形の１個目
var face1 = new THREE.Face3( verticesStride+0, verticesStride+1, verticesStride+2 );
face1.normal = new THREE.Vector3(1, 0, 0);
geom.faces.push( face1 );
geom.faceVertexUvs[ 0 ].push( [
new THREE.Vector2( 0.75, 0 ),
new THREE.Vector2( 0.75, this.texcoordOne * (this.maxCeilingHeight - ceilingHeight) ),
new THREE.Vector2( 1, this.texcoordOne * (this.maxCeilingHeight - ceilingHeight) ) ] );

マップの描画のためのマップデータの
受け渡し
Ember.jsからWebGL(Three.js)へのデータ受け渡
しは、そんな特別なことはしていない。
Ember Dataモデルで、Fulfilledされたデータから
文字列を取り出し、それを文字列解析して、
Three.jsのジオメトリ構築用の関数に渡してい
るだけ。

Ember.js Observer and WebGL
• 敵がダメージを受けると、敵画像が揺れたり
しているが、これはEmber.jsのObserverを使っ
ている。
• 敵や味方のステータス値もEmberオブジェクト
として管理しており、HPが減るとObserverが起
動、Three.jsの敵ポリゴンの座標値を振動さ
せている。

Computation of
Game character’s
parameters
RPGでは、あるパラメー
ターから他のパラメー
ターを算出する、という
ケースが非常に多い。
→Computed Properties
で解決！
本制作ツールでは、
キャラクターのパラメー
ターを自由に新設し、パ
ラメーター間の数学関
係を自由に記述できる。

Ember.jsとWebゲームの親和性
• UIの表示・更新に最適！
– 初期バージョンはjQueryのみで処理していたが、やはり地獄だった。今は
Ember.jsのお陰でかなりスマートになった。
– UIの数が多いRPGなどには特に向いている。使わない手はない。
• 双方向バインディングが便利。
– 大型のゲームになると、複数の場所間でデータを同期する必要が生じるが、
同期処理の面倒はすべてEmber.jsが見てくれる。
• オブザーバーも便利。
– ゲームUIでは単なるテキストではなく、画像を使用することも多い。内部デー
タの再計算だけにデータバインディングを使用し、アニメーションは別描画ラ
イブラリを併用することも可能。表示の更新のタイミングはObserverで。
• RPGなど、パラメーター同士の計算が多いゲームではComputed
Propertiesが活躍する。

Ember.js最高！
• 以上、Ember.jsは本Webサービスのゲーム部
分、制作ツール部分双方の根底を支えてい
る。
• Ember.jsがなければ、ここまでの開発効率と
コードの見通しの良さは考えられなかった。
Thanks! Ember.js!

最後に
• Ember.jsを学びたい方。
– Ember.js公式ガイド日本語訳を公開しています！
https://github.com/emadurandal/emberjs-guides-japanese-
translation
– Developers.IOの「シリーズEmber.js入門」も必見。
（渡辺さん素晴らしい記事をありがとう！）
http://dev.classmethod.jp/series/getting-started%
E2%80%8E-emberjs/

Ember.js Tokyo event 2014/09/22 (Japanese)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (14)

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie Ember.js Tokyo event 2014/09/22 (Japanese)

Ähnlich wie Ember.js Tokyo event 2014/09/22 (Japanese) (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

Ember.js Tokyo event 2014/09/22 (Japanese)