feb19.jp

Nobuhiro Takahashi
Designer / Engineer

スマホ向け HTML5 ウェブゲームを作るために必要な 5 つのこと

最近 HTML5 ウェブゲームを作ったりして思ったことをまとめてみました。
恐らく『スマホ向け HTML5 ウェブサイト制作』とほぼ同義です。


1. デバイスを理解する

小さくて、タッチスクリーンで、3G という通信回線であるということを常に考えてペーパープロトやデザインしたほうがよさそうです。

PC でデザイン・開発するので小さくなりがち、詰め込みがちですが、あまり多くの情報を載せられないし、画像とか詰め込み過ぎるとロードタイムで死ぬので、ゲームデザイン設計からグラフィック制作、実装に至るまで、ペーパープロトタイプなどを活用してスマホのことを考えてあげる方が良さそうです。

更に多種多様なデバイスがあるので、色んなデバイスについての知識を付けましょう。幾つか最低ラインみたいなデバイスを定義すると良さそうです。

ex. iOS / Android のガイドライン読みましょう(必須)
iOS ヒューマンインターフェースガイドライン
Design | Android Developers

ex. iPhone とかでペーパープロトするのに便利なアプリ
POP

ex. あと情報デザイン系の本
情報デザインの教室 仕事を変える、社会を変える、これからのデザインアプローチと手法

情報デザインとは情報技術を使ったひとつのデザイン領域ではなく、「うれしい体験のためのデザイン」といえます。様々なデザイン領域や仕事の基本となる概念です。

ex. タッチパネルのデザインという本が良さげ
「タッチパネル」のゲームデザイン ―アプリやゲームをおもしろくするテクニック

ゲームデザインやって思うのがインタラクティブデザインにめっちゃ通じるなというところです。
PC/スマホスクリーンでのインタラクティブデザインやってるウェブデザイナー全般は、ゲームデザインを学んだ方が良さそうです。

逆説的に @akirafukuoka さんのツイートが心に残っています。

インタラクティブを学ぶためにゲーム制作するというか。


2. 融通の聞くフレームワークを選定する

PC ウェブサイトならば jQuery というように、ゲームもそういったフレームワーク(ライブラリ)が必要になると思います。

個人的には実装、最終確認フェーズでロード時間がやはりネックになりがちなので、無駄が多いフレームワークはファイルサイズを削りにくい JS の容量が大きくなりがちです。目安として 100KB 以上あるフレームワークは無駄が多いと思っています。

ゲーム全体で 1MB 以上あったらロード時間で死んでしまいます。

容量を常に意識した開発が求められていて、リッチさ、ゲーム性も大事ですが、エンジニアリング視点からのボトムアップはとても重要なので、詰め込み過ぎだろと思ったらエンジニアは色々つべこべ言うとよさそうです。

個人的には CreateJS の EaselJS だけであれば 62KB なのでこれだけ機能が有る割には結構コンパクトで優秀だと思います。SoundJS や PreloadJS、TweenJS など不要であれば組み込む必要が無いためです。

ex. いろんな HTML5 フレームワーク(他にもあるよ)
http://html5dev-software.intel.com
https://www.scirra.com
http://impactjs.com
http://createjs.com/#!/CreateJS
http://www.yoyogames.com/gamemaker/studio
http://threejs.org
http://biz.turbulenz.com/developers
http://craftyjs.com
http://lycheejs.org/index.html
https://github.com/cocos2d/cocos2d-html5
http://enchantjs.com
https://github.com/phi-jp/tmlib.js/

画像がスプライトから取り出せて、タッチイベントが取れて、ループ管理ができれば、ゲームは作れるので、 JavaScript フルクラッチってのも手だと思う。フレームワークに必要なことってそんなないし・・・だからこんなにフレームワークあるのか!

もしかしたら自分でフレームワーク作るぐらいがちょうどいいのかも。必要になりそうな機能をゲームデザインの本からリストアップして、順次実装していくとか勉強になってよさそうですね。


3. スマホな実装をする

当然すぎるのですが viewport と window のスクロールについて。


3-1. viewport

スマホ用のウェブサイトを使うときの下記のおまじないはこれ一択。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

viewport はクソです。なんだかんだ結局これしか使えないです。
device-width 以外、scale=1.0 以外だと死ねます。
なのでもはやこれを常套句として実装をデザインしていくと良さそうです。

ex. W3C の viewport ー ブラウザが対応してなければ意味ないけど読んどいたら光が見えるかも
http://dev.w3.org/csswg/css-device-adapt/


3-2. window でタッチイベントをキャンセル

window のタッチイベントをキャンセルして、画面のスクロールをさせないようにするとよさそうです。

addEventListener を手前のオブジェクトにやっておいて、false にしておけば、JavaScript はイベントが手前 (DOM の下の階層) からバブリングされるので、手前のオブジェクトはタッチイベントを発火させることができます。

window.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);
window.addEventListener("mousemove", function(e) { e.preventDefault(); }, false);
window.addEventListener("mouseup", function(e) { e.preventDefault(); }, false);
window.addEventListener("touchstart", function(e) { e.preventDefault(); }, false);
window.addEventListener("touchmove", function(e) { e.preventDefault(); }, false);
window.addEventListener("touchend", function(e) { e.preventDefault(); }, false);

ex. W3C の TouchEvents 系読んでおくと光が見えるかも
http://www.w3.org/TR/touch-events/


4. ユーザーのプレイ状況を自動セーブ

電話が途中でかかって来るかもしれませんし、スマホでやる以上ゲームプレイの妨害はたくさんあります。
ゲームのプレイ状況は自動で保存するのがスマホコンテンツの鉄則っぽいです。

実装だけではなく、そういうための設計をすることも大事です。
ステートに応じて表示するページを出しわけたり、体力や経験値、レベル、取得済みアイテムなどを復元すると良さそうです。

cookie には限界があるので HTML5 Web Storage (LocalStorage) がよさそうです。
文字列で保存されるので、JSON 形式で変換すれば数値やオブジェクトも保存できます。

function save(state) {
	window.localStorage.setItem("state", JSON.stringify(state));
}
function load() {
	var state = window.localStorage.getItem("state");
	if (state) {
		return JSON.parse(state);
	} else {
		return null;
	}
}

ex. W3C Web Storage 読んでおくと光が見えるかも
http://www.w3.org/TR/webstorage/

普通のサイトとかでもやった方が良さそうです。一度みたスプラッシュは表示しないとかのユーザー視点設計とか、検索 UI の履歴を保存しておくとか、商品ページの閲覧履歴とか。


5. プロファイラを使いまくる

Chrome や Safari で使える Web Inspector で、余計なリクエストが走っていないか、エラーが出ていないか、CSS の調整、 JavaScript のデバッグ、LocalStorage の書き換え、UserAgent の書き換えなどのチェックができます。

Web Inspector を知ることはウェブフロント開発でもはや必須ですね。
ウェブディレクターもここの情報を読めるようになると凄く強いディレクターになりそう。

ex. Chrome/Safari Web Inspector
https://developers.google.com/chrome-developer-tools/?hl=ja
https://developer.apple.com/jp/technologies/safari/developer-tools.html

ex. IE Developer Tools (F12 開発者ツール)
http://msdn.microsoft.com/ja-jp/library/gg589507(v=vs.85).aspx

ex. Firefox Firebug
http://getfirebug.com

Android / iOS も実機を PC に繋いだりウェブ経由でウェブインスペクタを出す方法があります。

プロファイラを知ることはリファレンスを読むのと同じぐらい、即戦的にはそれ以上に価値があると思います。

--

とはいえ結局は楽しいものを作る、誰かに楽しんでもらうっていう思いが一番大事ですね。

Tweet Share Bookmark

Navigation

prev: Hello LEAP MOTION
next: 消費される UI - Twitter Bootstrap

Recently Entries