Firefox osにenchant.jsを食わせてみた

Post on 11-Jul-2015

766 views 2 download

Transcript of Firefox osにenchant.jsを食わせてみた

FirefoxOS にenchant.js を食わせてみた

自己紹介

名前:# るっか和尚 (@lucca0show)お仕事:# 京都でWebプログラマっぽいな

にか趣味:#ゲーム、漫画とかアレな感じ。

#若干懐古厨ゲーマー気味

やりたかったこと

● マルチプラットフォームなゲームを作成○ 移植の難しさの確認とかバッドノウハウを調べて

みる

マルチプラットフォームな

ゲームを作ってみる

● FirefoxOSはHTML5な技術が使われてる

○ マルチプラットフォームに対応したゲームアプリ

を開発できるのでは?

○ 既存のJSライブラリを使えば簡単に作成出来る

気がする

準備するもの

● Firefox for Desktop (ブラウザ)

○ Firefox OS Simulator 4.0 インストール

● enchant.js

● やる気

そもそもenchant.js とは?

● ㈱UEI社が開発したオープンソースなHTML5ベースなゲームエンジン○ わざわざゲーム用のコードをゴリゴリ書かなくても

ライブラリがいい感じに用意されてる○ PC / iOS / Android 主要なプラットフォームに対

応○ jsdo.itあたりにサンプルが結構ある(らしい)

何故enchant.jsなのか?

● ぶっちゃけレシピ本を積読してたから○ 一応enchant.jsがFirefoxOS上でもきちんと動作

するか検証するという建前もあったりなかったり

とりあえず動かしてみる

● まずは最小構成でアプリの雛形作ってみる

とりあえず動かしてみる

● manifest.webapp○ FirefoxOSに必須なマニフェストファイル

とりあえず動かしてみる

● htmlファイル

とりあえず動かしてみる

● …出来た、超簡単すぎて逆に不安。

enchant.js入れてみる

● クマを動かしてみる。○ enchant.js入れる

○ ゲーム部分のJSでenchant()呼び出す

○ 任意のコードをガリガリ書く

○ SimulatorにAddする

○ コイツ動くぞ!←これ目標

enchant.js入れてみる

● クマを動かしてみる。

enchant.js入れてみる

● …正直順調に行き過ぎた○ ここで躓いた!的なバッドノウハウなどをネタに

するつもりだったのでこれは予想外。

enchant.js入れてみる

● つ、つまりそれぐらい簡単にenchant.jsでゲームが作れるってことだったんだよ!

enchant.js入れてみる

jQueryで非同期通信

● さすがにこれで終了は残念すぎる○ みんな大好きjQueryでお茶を濁すしかねえ!○ 非同期通信って言っとけばきっと見逃してくれる

はず。

やりたかったこと

● マルチプラットフォームなゲームを作成○ 移植の難しさの確認

● jQuery使える?※急遽追加○ ajaxを使った非同期通信とか使えたらいい

なー。

jQueryで非同期通信

● クマを押したら非同期通信が走るようにしてみる○ 配列をJSONで返す簡単なPHPをサーバにアップ

ロードして確認してみた

jQueryで非同期通信

● きちんと取れてる

jQueryで非同期通信

● ソースコードはチョーテキトーなヤツ

触ってみた感想とか

● オフラインでも動くWebアプリケーション以上の価値を見いだせない○ ただ選択肢としては面白いと思うので応援したい

ところ● 解像度の問題

○ 今のところあまり端末が出回ってないことなどもあり、今後に注目?

● 端末買えない、KEONェ…● 専用IDEが欲しい

○ なくてもなんとかなるけど微妙に不便

まとめ

● FirefoxOSはWeb開発を経験した人にとって非常にわかりやすい

● 既存のライブラリなども使いまわせると思われるので参入ハードルが低い…かも

● enchant.jsを使えばすごく簡単にライトゲームを量産出来る

● とりあえず開発してみればいいと思うよ!

ご静聴ありがとうございました。