enchant.js / Ubiquitous Entertainment Inc.
さて、”ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【導入篇】 キャラクター画像をキー入力で動かしてみる”の記事ではキー入力によるキャラ画像の動かし方を学んだわけだが、スマートフォンにはキー入力が存在しない機種が大半なので（私は007SHJなのでキー入力できるが）、これに代わる入力契機がスマートフォン向けには必須ということになる。
スマートフォン向けのブラウザゲーム開発も視野に入れているので、ui.enchant.jsに用意されている「バーチャルパッド（十字方向キーパッド）」を使ってみたいと思う。これがあればPC上でもスマートフォン上でもキャラ画像を動かすことができるようになる。
ではやってみよう。
■まずは準備
知らないと色々と罠がある。
まず、「バーチャルパッド（十字方向キーパッド）」は”ui.enchant.js”に用意されているので、”ui.enchant.js”を読み込む必要がある。”ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【導入篇】 enchant.jsのダウンロードと開発準備”の記事で用意したhtmlのひな型に追加して以下のようにしてほしい。
[html firstline=”1″ highlight=”8″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ここにゲームのタイトルを書く</title>
<script type="text/javascript" src="./js/lib/enchant.js"></script>
<script type="text/javascript" src="./js/lib/ui.enchant.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<style>
/* ウィンドウとゲーム画面の隙間をなくす */
body {
background: #000;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!– ここにenchant.jsで作られたゲームが表示される –>
</body>
</html>
[/html]
ここで早速、罠①だが、jsの読み込み順序を間違えるとバーチャルパッド（十字方向キーパッド）は表示されないので注意が必要だ。ui.enchant.jsはプラグインなので、先に必ずenchant.jsが読み込まれていなければならない。
【× 間違い、ダメよ】
[html firstline=”6″ highlight=”7,8″]
<title>ここにゲームのタイトルを書く</title>
<script type="text/javascript" src="./js/lib/ui.enchant.js"></script>
<script type="text/javascript" src="./js/lib/enchant.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
[/html]
【○ 正解！】
[html firstline=”6″ highlight=”7,8″]
<title>ここにゲームのタイトルを書く</title>
<script type="text/javascript" src="./js/lib/enchant.js"></script>
<script type="text/javascript" src="./js/lib/ui.enchant.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
[/html]
で、罠②だが、このui.enchant.jsはある４つの画像の読み込みが必須になっていて、指定された箇所に画像を配置した構成でui.enchant.jsを読み込まなければバーチャルパッド（十字方向キーパッド）を表示してくれない。なんて我儘なやつなんだ。ちょっとui.enchant.jsの中身を見てみてほしい。
[javascript firstline=”47″ highlight=”50″ title=”ui.enchant.js”]
/**
* @type {Object}
*/
enchant.ui = { assets: [‘pad.png’, ‘apad.png’, ‘icon0.png’, ‘font0.png’] };
[/javascript]
ご覧の通り、これら４つのファイルの読み込みが必須になっていて、且つ、jsを読み込んでいるhtmlと同じディレクトリに存在することを前提とされてしまっている。つまり、以下の構成を求められているのだ。
┗index.html
┗pad.png ⇒ui.enchant.jsが参照している画像
┗apad.png ⇒ui.enchant.jsが参照している画像
┗icon0.png ⇒ui.enchant.jsが参照している画像
┗font0.png ⇒ui.enchant.jsが参照している画像
┗「js」フォルダ
┗main.js
┗「lib」フォルダ
┗enchant.js
┗ui.enchant.js ⇒プラグイン本体
┗「img」フォルダ
┗xxx.png
これは好みの話になるが、こんなところに画像ファイルを置いておきたくない。「img」フォルダはenchant.jsライブラリとは関係のない独立した自作の画像を格納していきたいので、「lib」フォルダにこの４つの画像を置きたいと思う。以下の構成にする。
┗index.html
┗「js」フォルダ
┗main.js
┗「lib」フォルダ
┗enchant.js
┗ui.enchant.js ⇒プラグイン本体
┗pad.png ⇒ui.enchant.jsが参照している画像
┗apad.png ⇒ui.enchant.jsが参照している画像
┗icon0.png ⇒ui.enchant.jsが参照している画像
┗font0.png ⇒ui.enchant.jsが参照している画像
┗「img」フォルダ
┗xxx.png
ということは、ui.enchant.jsのソースを変更する必要があるので、以下のように画像参照先をすべて修正しよう。
[javascript firstline=”47″ highlight=”50″ title=”ui.enchant.js”]
/**
* @type {Object}
*/
enchant.ui = { assets: [‘./js/lib/pad.png’, ‘./js/lib/apad.png’, ‘./js/lib/icon0.png’, ‘./js/lib/font0.png’] };
[/javascript]
[javascript firstline=”64″ highlight=”64″]
var image = core.assets[‘./js/lib/pad.png’];
[/javascript]
[javascript firstline=”127″ highlight=”127″]
var image = core.assets[‘./js/lib/apad.png’];
[/javascript]
[javascript firstline=”547″ highlight=”547″]
this.image.draw(enchant.Game.instance.assets[‘./js/lib/font0.png’],
[/javascript]
[javascript firstline=”706″ highlight=”706″]
this.heart[i].image = enchant.Game.instance.assets[‘./js/lib/icon0.png’];
[/javascript]
これで前準備は完了だ。後はmain.jsでバーチャルパッド（十字方向キーパッド）を生成すればよい。
※ちなみに、罠に嵌ると以下のような読み込み画面のまま先に進まなくなる
■main.jsでバーチャルパッド（十字方向キーパッド）を生成する
では、”ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【導入篇】 キャラクター画像をキー入力で動かしてみる”の記事で用いたコードをベースとして使って、バーチャルパッド（十字方向キーパッド）を生成しよう。
[javascript firstline=”1″ highlight=”21,22,23,24″ title=”main.js”]
enchant();
var SCREEN_WIDTH = 480; // 画面の幅.
var SCREEN_HEIGHT = 640; // 画面の高さ.
window.onload = function() {
// 表示領域を設定（幅と高さ）.
var core = new Core( SCREEN_WIDTH, SCREEN_HEIGHT );
// frames（フレーム）per（毎）second（秒）、ゲーム進行スピードを設定.
core.fps = 24;
// pre（前）-load（読み込み）、ゲームで使用する素材を予め読込.
core.preload(‘./img/xxx.png’ );
// メイン処理を実行.
core.onload = function() {
// ゲームのシーンに背景色を設定.
core.rootScene.backgroundColor = ‘#80f0b8’;
// バーチャルパッド（十字方向キーパッド）を生成.
var pad = new Pad();
// ゲームのシーンにバーチャルパッド（十字方向キーパッド）を追加.
core.rootScene.addChild( pad );
// キャラを配置、幅と高さを設定.
var chara = new Sprite( 96, 64 );
// 予め読込した画像を設定.
chara.image = core.assets[ ‘./img/xxx.png’ ];
// ゲームのシーンにキャラを追加.
core.rootScene.addChild( chara );
[/javascript]
さあどうだい、これだけで以下のように表示がされたはずだ。
表示位置の設定をしていないので、「X座標：0 × Y座標：0」の位置にバーチャルパッド（十字方向キーパッド）が表示された。操作感などから各自お好みの位置を決めて配置してほしい。私は取り敢えず、以下の位置に設定しておく。バーチャルパッド（十字方向キーパッド）の画像サイズは100×100だ。
[javascript firstline=”1″ highlight=”4,23″ title=”main.js”]
enchant();
var SCREEN_WIDTH = 480; // ゲーム画面の幅.
var SCREEN_HEIGHT = 640; // ゲーム画面の高さ.
window.onload = function() {
// 表示領域を設定（幅と高さ）.
var core = new Core( SCREEN_WIDTH, SCREEN_HEIGHT );
// frames（フレーム）per（毎）second（秒）、ゲーム進行スピードを設定.
core.fps = 24;
// pre（前）-load（読み込み）、ゲームで使用する素材を予め読込.
core.preload(‘./img/xxx.png’ );
// メイン処理を実行.
core.onload = function() {
// ゲームのシーンに背景色を設定.
core.rootScene.backgroundColor = ‘#80f0b8’;
// バーチャルパッド（十字方向キーパッド）を生成.
var pad = new Pad();
pad.moveTo( 10, SCREEN_HEIGHT – 100 );
// ゲームのシーンにバーチャルパッド（十字方向キーパッド）を追加.
core.rootScene.addChild( pad );
[/javascript]
moveToメソッドは指定した座標への移動を示している。
スマートフォンを手にした感じからすると、もう少し内側に表示した方が良いかもしれない。追って微調整していくので今はこのままでおいておく。
■バーチャルパッド（十字方向キーパッド）を操作してみよう！
実はバーチャルパッド（十字方向キーパッド）で入力されたイベントは、PC上でキー入力された場合のイベントと同じだ。なので、バーチャルパッド（十字方向キーパッド）の生成をしただけで、今回のミッションはもう完成したことになる。
早速、キャラを動かしてみよう。
バーチャルパッド（十字方向キーパッド）上をタッチ、PCならクリックするだけで、キャラが動くようになっているはずだ。バーチャルパッド（十字方向キーパッド）のプラグインは現在、斜めを含めた8方向入力に対応されている。
触った感じは如何だろうか？
ちゃんと8方向に移動できただろうか？
念の為、私がPC上でマウスで動かした動画「バーチャルパッド（十字方向キーパッド）でキャラが動く動画」をここに置いておく。
ちょっと気になった点としては、現在の最新のバージョンでは違うのだが、以前は方向キーの描画部分は押した方向に色（グレー）が付いていた。その方が視認し易くて個人的には良さそうだなと思うのだが、必要に駆られたらまたui.enchant.jsをいじってみたいと思う。
■キーがあるならボタンもほしい
バーチャルパッド（十字方向キーパッド）を表示したのなら、「バーチャルボタン」も表示してみたいと思うのが当然だろうか。次は、「バーチャルボタン」を表示してみよう！ では、”ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【導入篇】 バーチャルボタン（Aボタン／Bボタン／Xボタン／Yボタン）を表示してみる”の記事で。
（アシベズヘア@ashibehair_m）
ピンバック: materialize.jp » ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【導入篇】 バーチャルボタン（Aボタン／Bボタン／Xボタン／Yボタン）を表示してみる
ピンバック: materialize.jp » ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【RPG（ロールプレイングゲーム）篇】 戦闘シーンにステータスウィンドウ（状態表示枠）を表示する
ピンバック: materialize.jp » ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【RPG（ロールプレイングゲーム）篇】 戦闘シーンにステータスゲージ（HPゲージ）を表示する
ピンバック: materialize.jp » ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【RPG（ロールプレイングゲーム）篇】 戦闘シーンに１体の敵キャラ（エネミー／モンスター）を配置する
ピンバック: materialize.jp » ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【RPG（ロールプレイングゲーム）篇】 戦闘シーンにバーチャルパッド（十字方向キーパッド）を表示する
ピンバック: materialize.jp » ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【導入篇】 enchant.jsのダウンロードと開発準備
ピンバック: materialize.jp » WebViewで画面の右横にできる隙間を消す方法（スクロールバー表示領域を消す方法）
ピンバック: materialize.jp » adbコマンドを気軽に使えるようにする方法（adbのPATHを通す方法）
ピンバック: materialize.jp » 秀丸（テキストエディタ）で行の先頭に文字を一括挿入する方法
ピンバック: materialize.jp » アスタの「アイコン型広告」の文字色を変更する方法（Androidアプリ）