SYSTEM,WEB,MOBILE and DESIGN
Android系,お知らせ,技術ログ

 
HTML5でのゲーム開発案件が出た際に、事前調査で下調べした内容を公開致します!

 
 

<開発環境の構築>

1.公式サイト(http://enchantjs.com/)で「Download」ボタンをクリックする。

 
 

2.「Download latest version of enchant.js」ボタンをクリックする。

 
 

3.ダイアログが表示されるので「保存」ボタンを選択する。

 
 

4.数秒でダウンロード完了。保存したフォルダを解凍し、任意の場所に配置する。

 
 
 

<新しいゲームを作る準備>
ゲームをつくるときには、ダウンロードしたフォルダ内のbuildフォルダ直下にあるenchant.jsを取り出して(コピーして)使う。その他プラグインや画像なども適宜 取り出して使用する。

 
 

1.新しいフォルダを作成する。ここではフォルダ名をnewgameとする。

 
 

2.newgameフォルダ内に上記のenchant.jsファイルを置く。

 
 

3.テキストエディタを開いて以下のように記述し、html形式で保存する。ここではファイル名をindex.htmlとする。このとき、文字化けを防ぐためにエンコードをUTF-8にすること。

 

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>ニューゲーム</title>

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,

maximum-scale=1.0,user-scalable=no”>

<script src=”enchant.js”></script>

<script src=”main.js”></script>

<style>

/* ウィンドウとゲーム画面のすき間をなくす */

body {

padding: 0;

margin: 0;

}

</style>

</head>

<body>

<!– ここにゲームが表示される –>

</body>

</html>

(出典:enchant.jsでスマホ向けゲームを作り始めるための基礎知識http://www.atmarkit.co.jp/ait/articles/1302/06/news029.html

 
 

4.テキストエディタの新規作成ボタンを押して以下のように記述し、JavaScript形式で保存する。ここではファイル名をmain.jsとする。

 

enchant();

window.onload = function(){

var game = new Game(320, 320);

game.onload = function(){

//ここに処理を書いていく

}

game.start();

}

(出典:enchant.jsでスマホ向けゲームを作り始めるための基礎知識http://www.atmarkit.co.jp/ait/articles/1302/06/news029.html

以上で雛形は完成。

 
 
 

<スマートフォン向けゲームをenchant.jsで製作する際の注意点>

・1秒間のフレーム数が多いほど滑らかに動くようになるが、その分処理の負担も増える。携帯端末でも遊べるゲームを作るのであれば、12~24fpsと少なめに設定するべき。ちなみに、一般的なテレビの映像はおよそ30fps。動きの激しいビデオゲームは60fps程度。(出典:enchant.jsでスマホ向けゲームを作り始めるための基礎知識http://www.atmarkit.co.jp/ait/articles/1302/06/news029.html

 
 

・一部アンドロイド端末において、Webページの拡大・縮小をふせぐviewportの指定がうまく機能しないものがある。例えば二段ジャンプをしようと画面を二回タップした場合、それらの端末では不意に画面の拡大が発生してしまい、誤操作の原因となる。これに対する完全な対策は難しく、ある程度発生してしまうことを留意しておく必要がある。対処方法はenchant.jsのバージョンやWebブラウザの更新状況によって異なるため、その都度修正が必要である。(出典:enchant.jsでゲームを作る7つの利点と5つの注意点http://www.atmarkit.co.jp/ait/articles/1212/03/news018.html

 
 

・HTMLとJavaScriptで作られたゲームは、Webブラウザというアプリケーション上で動作させる都合上、Webブラウザの仕様により動作速度に大きな差が出る場合がある。特に、高解像度のものは画面を描画する負担が大きいのか、低解像度の端末よりも動作速度が遅くなりがちなことが多く、最新の機種である方がより良い動作をするわけでもないようである。また、端末ごとの速度差とは関係なく、シューティングゲームの爆発・弾幕などのように画面いっぱいに広がる処理はカクつくことがあるが、これはモバイル端末の性能の向上によって改善される可能性がある。(出典:enchant.jsでゲームを作る7つの利点と5つの注意点http://www.atmarkit.co.jp/ait/articles/1212/03/news018.html

 
 

・スマートフォンにおけるサウンドの再生は端末のスペックに依存する部分が多く、挙動の差が激しい。(出典:enchant.jsでゲームを作る7つの利点と5つの注意点http://www.atmarkit.co.jp/ait/articles/1212/03/news018.html

 
 

・Android端末のWebブラウザはマルチタッチに対応していないものが多く、その制約としてenchant.jsもマルチタッチを扱うメソッドが無い。(出典:enchant.jsでゲームを作る7つの利点と5つの注意点http://www.atmarkit.co.jp/ait/articles/1212/03/news018.html

 
 

・スマートフォンのフォーカス表示に対する設定をそのままにしていると、Canvas上に画像を表示して操作するインターフェースは実質的に作れない。CSSに以下の設定を追加する必要がある。

 

#id_canvas2 {

position:absolute;

top: 10px;

left: 60px;

z-index: 2;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

(出典:初めてのHTML5ゲーム作成http://homepage2.nifty.com/t_ishii/site/html5game/p4_2.html

 
 

・PCと比べてスマートフォンはメモリ搭載量が少ないため、数十メガバイト程度のメモリ消費でも、プログラムが動作しなくなることがある。そのため、消費されるメモリ量を少なく抑える工夫が必要。処理の単純化のためには、プログラムで使用する全ての画像は最初に読み込んでおいた方が便利だが、メモリ消費量を減らすためには、必要になった時点で読み込み、かつ、その時点で不要なデータは破棄する方がよい。(出典:初めてのHTML5ゲーム作成http://homepage2.nifty.com/t_ishii/site/html5game/p4_5.html

 
 

・iphoneやAndroidのWebブラウザはWebGLに対応していないため、WebGLを利用した3D描画を行うことはできない。Three.jsというプラグインには、WebGLが使えない環境でもCanvasに3D描画を行うことで対処する方法があるが、全てが同じように表示されるわけではない。また、2DのCanvasに描画しているため、処理速度がかなり低下することもある。(出典:古籏 一浩著・JavaScript逆引きハンドブック)これらの理由から、スマートフォン向けのゲームを製作する上でCanvasで3D描画を行うことはあまり好ましくない。

 
 
 

<参考サイト>
enchant.js(公式サイト)
http://enchantjs.com/
公式ドキュメント(基本機能)
http://wise9.github.io/enchant.js/doc/core/ja/index.html
公式ドキュメント(プラグイン機能)
http://wise9.github.io/enchant.js/doc/plugins/ja/index.html
公式逆引きリファレンス
http://enchantjs.com/ja/tutorial/lets-start-enchant-js/#ref_5
code.9leap(enchant.js学習サイト)
http://code.9leap.net/
9leap(ebchant.jsゲーム投稿サイト)
http://9leap.net/
5分でわかる tl.enchant.js
http://www.slideshare.net/sidestepism/5-tlenchantjs
enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」
http://www.slideshare.net/sidestepism/enchantjs-meetup-tokyo-2-enchantjs
enchant.jsでHTML5+JavaScriptゲーム開発入門(1):enchant.jsでゲームを作る7つの利点と5つの注意点
http://www.atmarkit.co.jp/ait/articles/1212/03/news018.html
enchant.jsでHTML5+JavaScriptゲーム開発入門(2):enchant.jsでスマホ向けゲームを作り始めるための基礎知識
http://www.atmarkit.co.jp/ait/articles/1302/06/news029.html
enchant.jsでHTML5+JavaScriptゲーム開発入門(3):enchant.jsで重要なスプライトとシーンを使うには
http://www.atmarkit.co.jp/ait/articles/1304/01/news034.html
enchant.jsでHTML5+JavaScriptゲーム開発入門(4):JavaScript製とは思えないゲームをenchant.jsで簡単に作るには
http://www.atmarkit.co.jp/ait/articles/1304/25/news034.html
WEBデザイナーでも簡単にゲーム作りが学べるenchant.js の使い方
http://blog.nico0927.net/20120829/enchant-js/829
enchant.js入門
http://d.hatena.ne.jp/blankblank/20110522/1306069754
ビギナーのためのenchant.jsゲームプログラミング入門
http://libro.tuyano.com/index2?id=987003
初めてのenchant.js 001 基本的なこと[JavaScript]
http://info.yama-lab.com/?p=969
「enchant.js」でゲームを作ろう! HTML5とJavaScriptによるアクションゲーム制作入門
http://www.4gamer.net/games/032/G003263/20110428001/
enchant.js使い方辞典 (v0.6.2)
http://www.openspc2.org/reibun/enchant.js/v0.6.2/
enchant.js 怒涛の 100 tips
http://tmlife.net/programming/javascript/enchant-js-100-tips.html
通勤電車でenchant.jsゲーム開発
http://enchantjs-train.blogspot.jp/
Tweener Documentation
http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

writer@hassiy