もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

enchant.jsをTitanium Mobileで動かしてみる その1

JavaScript enchant.js アプリ開発 titanium mobile ゲーム

そろそろ2個目のアプリを作ってみるかということで、Titanium Mobileでenchant.jsを動かしてゲーム的な何かを作ってみようと思います。

enchant.jsとは！

http://enchantjs.com/ja/

ユビキタスエンターテインメントが開発・運営しているフレームワークで、HTML5とJavascriptで簡単にゲームが作れるというものです。

サンプル的にはこんな感じ。jsdoitでオンラインコーディングできます。

実際に作られたゲームはこちらのサイトで公開されてます。
http://9leap.net

余談ですが、このenchant.jsの開発者の清水さんはenchant.jsは単なるゲーム開発のためのツールではなく、目的は「誰もがプログラミングを習得できるようにすることにある」と言っていて凄い応援したくなります。開発のハードルが下がることでいろいろな人がモノづくりにチャレンジできるといいですね。

動くか検証してみる

本題に戻り、Titaniumで動かしてみようということでサンプルのプロジェクトを作成。
せっかくなんでAlloyでコーディング。

index.xmlにwebviewを乗せてenchant.jsが動いているhtmlをラップするという構成で実装してみます。

まず、encahnt.jsをダウンロードして、適当なサンプルアプリを選びます。
今回はサンプルの中からcanvasをチョイスしました。

んで、assetsフォルダ配下にhtmlフォルダを掘って、サンプルのindex.htmlとchara1.gifを配置。
さらに作ったhtmlフォルダ配下にjsというフォルダを掘ってサンプルのmain.jsとenchant.jsを配置。

これで資材の準備はOKなのでソースをいじっていきます。
assets/html/index.html

サンプルhtml内のjsのパスを変えてあげます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="js/enchant.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>

views/index.xml

デフォルトで作られるlabelは消してWebViewを追加します。urlはassets内のindex.htmlを指定。

<Alloy>
    <Window class="container">
        <WebView id="webview" url="html/index.html" />
    </Window>
</Alloy>

controllers/index.js

同じくデフォルトで作られるイベントを削除

$.index.open();

styles/index.tss

同じく（以下略）

".container": {
	backgroundColor:"white"
}

これで準備OKなのでビルド。

f:id:Rei19:20130615192032p:plain

おお、シミュレータの中でクマが動いとる！

すかさず実機（iPhone4S）にもバイナリを転送してみたけど、ちゃんと動きますね。
タッチイベントも問題なく反応しているようです。
※細かい挙動で気になるところはありますが

今回はTitaniumのWebView上で動くことは検証できたので、次はローカルでenchant.jsでゲームっぽいものを作ります。最後にtitaniumに乗せて完成かな。

果たして動くのか・・・

※サンプルのソースはしょぼいですがgithubにあるので興味がある方はどうぞ。

https://github.com/rei-m/enchantSample.git

はじめて学ぶ enchant.jsゲーム開発

はじめて学ぶ enchant.jsゲーム開発