スマホでも動作する JavaScript製 アドベンチャーゲームの作り方
自己紹介 シケモクMK（@shikemokumk） プログラマー（主にバックエンド） 趣味でツール作成やサービス運営 （今回の発表も会社とは無関係）
R9（アールナイン） アドベンチャーゲーム開発キット。スマートフォンにも対応したゲームが簡単に作れる
ビジュアルノベルスタジオ 特別な知識が不要で直感的な操作だけで ゲームが制作できるツール
NovelJS 小説をスマートフォンに最適な形で出力できる。
今日のメニュー （１）HTML5で動くアドベンチャーゲームって？ （２）基本的なHTML・JavaScriptで制作する アドベンチャーゲームとTips （３）新ゲームエンジン、ローンチ
（１） HTML5で動くアドベンチャーゲームって？
アドベンチャーゲームとは 自分が選択した行動によって、ストーリーが分岐したりする ノベルゲーム、ビジュアルノベルなどとも呼ばれる
特徴 シーン ＋ 登場人物 ＋ テキストボックス 物語を進めるシーンであれば、 様々なケースで活用できる
広がる用途 (HTML５製アドベンチャー) スマホでアドベンチャーゲーム スマホでビジュアルノベル（小説） ソーシャルゲーム（イベントシーン） ゲーミフィケーションの流行 チュートリアルなどへの適応 →Webサービス全般に応用できる表現
なぜ、HTML5？ Mac,Linux,(Windows) Iphone,ipad,Android PSVITA,NintendoDS クロスプラットフォーム対応 Mac,Linux,(Windows) Iphone,ipad,Android PSVITA,NintendoDS
HTML5で動くアドベンチャーゲームとは ビジュアルノベルスタジオ デモ
（２） 基本的なHTML・JavaScriptで 制作する アドベンチャーゲームとTips
実際につくってみよう
今回つくってみるゲーム
HTMLファイルを準備
HTMLファイルを作成 などでググって、出てくる内容をコピペ
HTMLファイル <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>アドベンチャーゲーム</title> <meta name="description" content="テストサイト" /> <meta name="keywords" content="テスト,サイト" /> <link rel="stylesheet" type="text/css" href="./reset.css" /> </head> <body> </body> </html> ブラウザの標準スタイルを 打ち消すreset.cssは導入
背景を作成
背景 $("<div class='back'></div>") .css({ "width":"600px", "height":"400px" }).appendTo("body");
背景完成 $(".back").css({ background-image:"back.jpg" });
キャラクター登場
キャラクター登場 miku.png ren.png
キャラクター登場 $("<img src='miku.png'>").css({ top:200px, left:180px }).appendTo("body"); $("<img src='ren.png'>").css({ top:200px, left:300px }).appendTo("body");
テキスト領域の追加
テキスト領域の追加 $("<div class='inner'></div>").css({ top:300px, left:20px, width:360px, height:160px }).appendTo("body"); ここにテキストが入ります
画面完成
ゲームに動きを与えよう
シーンの変更
シーンの変更（シンプル） $(".back").css({ background-image:"new_back.jpg" }); ここにテキストが入ります
一瞬で画像が切り替わってします。 徐々に切り替わっていく演出をつけたい。
シーンの変更（応用） $(".back").animate( {opacity:"hide"}, {duration:2000} ); $(".back_sub").animate( {opacity:"show"}, $("<div class='back_sub'></div>") .css({ "width":"600px", "height":"400px", "background-image":"new.jpg", "display":"none" }).appendTo("body");
ストーリーを進める
ストーリーを進める $(".inner").html("新しいテキストです"); ここにテキストが入ります あああああああああいいいいいいい ちょっと、廊下に出てみようか
Tips ■画像素材のプリロードは必須 →読み込み前にDOMへの追加はNG →ローカル環境も同じく（ちらつき防止） ■DOM要素のレイヤ管理 →ローカル環境も同じく（ちらつき防止） ■DOM要素のレイヤ管理 →無計画に要素を投げ込んでいくと後々地獄 →レイヤを管理するクラスを通して操作するなど →要素グループを簡単に取り出せるように
音楽を再生する
再生方法 今回はmp3形式を採用 ■PCブラウザからの閲覧の場合 →FLASHプレイヤー ■スマートフォンからの再生の場合 →FLASHは使えない（iOS） →HTML5 Audio要素を使用する
音楽再生Tips（１） ■PCからの閲覧の場合 Audio要素 Firefoxでは、mp3形式の再生ができない罠 ■Safariでは、QuiciTimeがインストールされていないとAudio要素が使えない罠 →PCからの閲覧の場合はFLASHが最適
音楽再生Tips（２） スマートフォン実機からの閲覧の場合、ユーザの操作がトリガーとなったAudio再生でないと無効化される （例） 【OK】 画面クリック → 音楽再生 【NG】 画面クリック → 画面切り替え終了後、音楽を切り替える
音楽再生Tips（３） HTML5 Audioは同時に１つの音楽しかならせない。 【PC版】 再生したい音楽数のAudio要素を作成 new Audio 【iphone】 むりぽ →ネイティブ機能と連携
セーブデータ HTML5 ローカルストレージに保存 //セーブ localStorage.setItem(key,value); //ロード var json = localStorage.getItem(key); //jsonなどを文字列にして、保存しておくと良い
完成！
ぜひ、Webにアドベンチャーゲームの表現を 取り入れてみてください☆
（３）新ツールローンチ ここまでの説明した技術を活用した 新しいノベルゲームエンジンを作ってみた
http://tyrano.jp
windowsノベルゲームを HTML5に変換できる
特徴 ■HTML5で動作 →あらゆる環境で作品を発表できる。 →アプリ化もOK ■KAG３/吉里吉里との高い互換性 →ウィンドウズ向けに発表されていたゲームを簡単にスマホ向けに移植できる。（そのまま動く場合も） →KAG３/吉里吉里使いの人がスマホ向けのアプリを容易に開発 →逆に、スマホ向けに作ったアプリをウィンドウズアプリとしても発表できる
特徴 ■フリーウェア・商用利用可 ■JavaScriptを使用可能 Jqueryや他のサービスと連携した新しいアドベンチャーゲームの形 →Twitterなどのソーシャルデータ活用 ■まだ、実験版扱い →KAG・吉里吉里にお詳しい方、、、どうか。。
demo
Thank you Enjoy ADV Programming!