EM style へとリニューアルしてからのゲーム第一弾公開しました。昨年も作りましたクリスマス向けミニゲームです。4年振りに 2D グラフィックに帰ってきました。さくっと気持ちよく解いてもらえたら幸いです。
ヒントはゲーム内に用意してあります。
12月は 3DS をはじめ色々なゲームが発売されてはまってしまったのですが、合間合間に作って何とかクリスマスまでに間に合いました。
今後のゲームの予定ですが、別に脱出ゲームって部屋に限らなくてもいいんじゃない？と思って遺跡とか洞窟に焦点を置いたものを作ろうかなぁとぼんやりと考えています。
html5 で脱出ゲームは作れるのか？html5 の可能性を模索する連載第二回目です。
今回は大抵の脱出ゲームで使われる「効果音」を鳴らしてみました。
html5で脱出ゲーム デモ2（IE9,Chrome で動作します）
実は html5 における音声ファイルの対応はブラウザごとにバラバラです。各ブラウザに対応するには複数形式のファイルを用意しなければならず、現時点でゲーム製作は現実的ではないように思えます。
まだ html5 は正式勧告されていませんし、将来的には統一されて欲しいですね。
HTML5仕様、2014年の勧告目指す – ITmedia ニュース
とりあえず今回は mp3 を使用します。
効果音再生の際に遅延が発生してしまっては残念な事になってしまいますので、事前にロードします。
var audios = {"itemget": new Audio("sound/itemget.mp3")};
for(var i in audios){
audios[i].load();
} これを onLoad イベントでページが読み込まれたら実行するようにします。また1行目はコンマで区切って複数のオーディオファイルを定義できます。
赤字のダブルクオーテーションの中をどういう時に使う音か名前付けしておけば、便利です。
今回はアイテムを取得したら効果音を鳴らすようにしています。赤字の部分が効果音を再生している部分です。
canvas.addEventListener("mousedown", mouseDownHandler, false);
function mouseDownHandler(e) {
var rect = e.target.getBoundingClientRect();
mouseX = Math.floor(e.clientX - rect.left);
mouseY = Math.floor(e.clientY - rect.top); //クリック位置の検出
if(itemGet == 0){ //アイテムを取得した時の処理
if(mouseX > 250 && mouseX < 300 && mouseY > 325 && mouseY < 354){
itemGet = 1; //アイテム取得変数を更新
audios["itemget"].play(); //効果音を鳴らす
backGround(cx,cx2,itemGet); //背景を更新
}
}
}
function backGround(cx,cx2,item){
var img = new Image();
if(item == 0){ //最初の背景
img.src = "image/itemview1.jpg";
img.onload = function(){
cx.drawImage(img, 0, 0);
itemBar(cx2,item);
}
}else if(item == 1){ //アイテム取得後の背景
img.src = "image/itemview2.jpg";
img.onload = function(){
cx.drawImage(img, 0, 0);
itemBar(cx2,item);
}
}
}私は html5 があれば FLASH なんて不要と思っているわけではありません。現時点でクロスプラットフォームの観点ではどう考えても FLASH の方が優秀。モバイル向けならともかく、PC 向けにここまでして html5 でゲームを作る意味はなんだろう？と考えてしまいます。
html5 で脱出ゲームが作れるのか？という疑問を持ったのでやってみました。
html5 で作るといっても9割は JAVAScript ですけどね。とりあえず第一回ということで、脱出ゲームの基本的な部分「画面遷移」まで作りました。
html5で脱出ゲーム デモ（各種最新ブラウザで動作します）別窓
html5 での肝は canvas タグ。この中に色々描画していきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5で脱出ゲームは作れるのか？</title>
<script type="text/javascript" src="js/escape.js"></script>
</head>
<body>
<canvas id="escape" width="550" height="400"></canvas>
</body>
</html>
FLASH と違う点は、ボタンを押した時の処理をボタンに書くような事ができません。あと、クリックポイントでマウスポインタを指マークにするなど FLASH で勝手にやってくれた細かな処理も自分で書かなくてはいけません。
var title = "html5で脱出ゲームは作れるのか？";
var startbt = "Play";
var canvas = document.getElementById("escape");
if ( ! canvas || ! canvas.getContext ) { return false; }
var cx = canvas.getContext("2d");
cx.font = "20px 'Century Gothic'";
cx.fillText(title,110,100);
cx.fillText(startbt,250,250);今回のデモのタイトルはテキストベースで簡素なものですが、いっそ画像にしてしまえば FLASH と遜色ないものができます。「fillText」で表示したいテキスト、x座標,y座標を指定してテキストを描画しています。
FLASH では数行で済んだものが、結構な量になります。
canvas.addEventListener("mousedown", mouseDownHandler, false);
var view = 0; //いま自分がどこにいるのかを示す変数（0=タイトル）
function mouseDownHandler(e) { //マウスがクリックされたら動く関数
var rect = e.target.getBoundingClientRect();
mouseX = Math.floor(e.clientX - rect.left);
mouseY = Math.floor(e.clientY - rect.top); //マウスポインタの位置を取得
if(view == 0){
if(mouseX > 250 && mouseX < 300){
if(mouseY > 230 && mouseY < 253){ //クリック範囲を座標で指定
view = 1; //クリックされたら位置変数を更新
printView(); //部屋の画像を表示する（後述）
}
}
}function printView(){
var img = new Image();
if(view == 1){
img.src = "image/view1.jpg";
img.onload = function(){ //画像が完全に読込まれたら動く関数
cx.drawImage(img, 0, 0); //画像を描画
moveBt(); //画面遷移ボタンを表示
itemBar(); //アイテムバーを表示
}
}else if(view == 2){ ・・・
function moveBt(){
cx.beginPath();
cx.moveTo(4, 200);
cx.lineTo(25, 185);
cx.lineTo(25, 215);
cx.closePath(); //3つの点を線で結んで三角形にしています
cx.fillStyle = "#ffffff";
cx.fill(); //白で塗りつぶします
cx.beginPath();
cx.moveTo(546, 200);
cx.lineTo(521, 185);
cx.lineTo(521, 215);
cx.closePath();
cx.fillStyle = "#ffffff";
cx.fill();
}この時点でまだボタンとしての機能はありません。別に記述します。
Play ボタンクリックの時の「クリックしたら動く関数」に画面遷移ボタンをクリックした時の処理を追加します。
画面遷移ボタンのクリック範囲を座標で指定します。それが各視点分要ります。（view 1～4）
else if(view == 1){
if(mouseX > 4 && mouseX < 25){
if(mouseY > 185 && mouseY < 215){
view = 2;
printView();
}
}
if(mouseX > 521 && mouseX < 546){
if(mouseY > 185 && mouseY < 215){
view = 4;
printView();
}
}
}else if(view == 2){ ・・・
画面遷移ボタンのクリック範囲を座標で指定し、マウスカーソルを変更。範囲外ではデフォルトに戻しています。
if(mouseX > 4 && mouseX < 25 && mouseY > 185 && mouseY < 215){
document.body.style.cursor = "pointer";
}else if(mouseX > 521 && mouseX < 546 && mouseY > 185 && mouseY < 215){
document.body.style.cursor = "pointer";
}else{
document.body.style.cursor = "default";
} これらの要素を繋げた状態で見ないとわかりにくいのでソースを公開します。
ソース
FLASH より大変そうですが、html5 でも作れなくもないかなと思います。この基本構造だけでソースが180行近くあり、本格的に脱出ゲームを組んだらどれだけになるのか想像できません。
私は FLASH（ActionScript）以外にもプログラミング経験があるので出来ましたが、FLASH に慣れた人がいきなり JAVAScript で組むのは難しいと思います。そう考えると、FLASHブラウザゲーム界隈が html5 にシフトは考えにくいかな。敷居が高すぎる。その代わりに FLASH 作成ツールなしで、メモ帳だけでゲームが作れますけどね。
先日 Adobe がモバイル向け FLASH の開発中止を発表しました。FLASH 導入を頑なに拒んできた Apple が勝利する形となり、モバイルは html5 へシフトしていく模様。
しかし、将来的にはこの動きは PC の方にも波及してくると思います。モバイル向けに html5 で作るのに PC 向けに FLASH で作るでしょうか。恐らくしないでしょう。現時点でも従来では FLASH で作成されていたアニメーションは html5 や jQuery などで作成している所があるようです。
更には、Internet Explorer 10 では Metro 版、従来版の 2 つのタイプのIEが搭載されるそうで、この Metro 版 IE10 は FLASH 非対応です。どちらがよく使われるようになるかわかりませんが、PC 向け FLASH も終わりに近づく可能性をはらんでいると思います。
IE10のMetroスタイル版はプラグインフリーでFlash非対応に – ITmedia ニュース
もし PC 向け FLASH も終わってしまったら FLASH ブラウザゲー界隈はどうなってしまうのでしょう。こちらも html5 にシフトしていくのか、FLASH 対応ブラウザを使ってくださいと言い FLASH を使い続けるのか…。
html5 でゲーム作成というのがちょっと想像しにくいのですが、html5 で脱出ゲーム作成ができるのかどうかやってみようと思います。
新作脱出ゲームです。一部屋を脱出するタイプではなく、複数の部屋があります。１謎１部屋という形なのでどれをどれに使うなど迷うことはないと思います。
また、今作からインタフェースを少し変えました。
３つ目は人によって良ととるか悪ととるか様々のようなのでとりあえず今作で様子見という事で。
ヒント・攻略についてこちらで個々に対応する事はいたしませんのでご了承ください。
Adobe FLASH で編集記号の表示・非表示の切り替えは「Ctrl + Shift + 8」でできます。8 というのは「ゆ」と書かれているキーです。
編集記号（段落¶など）が表示されたらプログラミングするには邪魔にしかなりませんが、誤って押してしまい改善方法を調べるのにかなりの時間をもってかれてしまったので覚書として書いておきます。多分 if 文のカッコを打つ時に Ctrl キーと Shift キーを同時押ししてしまったのでしょう。
Swift 3D ver.6 でモデル保存したブーリアンオブジェクトをラスター出力すると必ず落ちる現象が発生しました。
販売元の D Storm 社に確認したところ、バグのようです。
ブーリアンオブジェクトをモデル保存しなければ落ちないので、１ファイルで完結すれば回避できます。つまり、ブーリアンオブジェクトの周りに別ファイル化したオブジェクトを配置していきます。
ブーリアンオブジェクトを使うと、空のファイルに別ファイル化した 3Dオブジェクトを色々配置していくという方法が使えない事になるのでかなり不便です。バグフィックスが待たれます。
ActionScript で BGM をループさせようとする場合…
ループ回数の部分で何回ループするか数字で指定すればいいわけですが、イントロがある BGM だとそうはいきません。このままだと2回目のループでもイントロが再生されてしまいます。
ちなみに BGM に限らず ActionScript でオブジェクトを扱う場合、識別子を与えます。これで ActionScript で各オブジェクトを判別できるようになります。方法は次のようにします。
前置きはこれくらいにして、イントロがあるBGMをループさせる方法です。
イントロとループする部分を波形編集ソフトなどを使って２つに分割します。
この時点でイントロ部分・ループ部分を綺麗に切り取っていないとプログラムに組み込んだ時に不自然なループになってしまいます。
//ループ部分
//イントロが終わったらループを再生する
bgm_intro.onSoundComplete = function() {
var bgm_loop:Sound = new Sound();
bgm_loop.attachSound(“loop”);
bgm_loop.start();
//ループ部分の曲が終わったらもう一回再生する
bgm_loop.onSoundComplete = function() {
bgm_loop.start();
};
};
onSoundComplete メソッドを使用します。指定したサウンドが終了したら～するという処理を記述する事ができます。onSoundComplete の前にサウンドオブジェクトを指定して以下のように記述します。
bgm_loop.start(0,999); というようにすると擬似無限ループですが、999回再生すれば止まってしまいます。そこで、onSoundComplete を入れ子にすることで無限ループにしています。
半年ぶりに脱出ゲーム公開しました。簡単脱出ゲーム Swiftly シリーズの新作です。2ED。
先週日曜に急に脱出ゲームが作りたくなって着手しました。仕事が終わった後のわずかな時間での作業は1日での進捗が少なくイライラするので簡単なものにする事にしました。アイテムが４つしかありませんし、簡単だと思います。難しめの案もあるのですが、それは次の機会に。
副題の Arrows は作ってたら矢印がいっぱい出てきたので付けました。（何
ヒント・攻略についてこちらで個々に対応する事はいたしませんのでご了承ください。
ActionScript を知らない人に ActionScript の話をして欲しいという初夢を見たのでブログ書きました。(*1)時代は ActionScript3.0 ですが、3.0は初心者なので勝手ながら2.0にさせて頂きます。
ActionScriptとは、Adobe FLASHに使われるプログラミング言語です。
難しい話は抜きにしてFLASHのアクションパネルに書けば動きます。FLASHオーサリングツールであれば特別な設定は不要です。
FLASH の拡張子は「.swf」ですが、object タグで FLASH を埋め込むことで「.html」ファイルで表示する事ができます。フレームの代わりにPHPを使うというWeb制作においては有用な記事があるのですが、ここではあまり関係ないので割愛します。
ついでに ActionScript を少しでも使えるようになれば、こんなことができるという一例を紹介します。
FLASH上に任意の値を表示する為には、「ダイナミックテキスト」という変数の入れ物を準備する必要があります。
ActionScript を使えばページフッタの西暦も自動更新します。
var d:Date = new Date(); var copyright:String; //コピーライトの入れ物 copyright = "copyright (c) 2002 - " + d.getFullYear().toString() + "Episodes & Melody All rights reserved.";
ActionScript を使えば自分の年齢を自動更新して表示できます。
var d:Date = new Date();
var profiles:String;//結果の入れ物
var now:String = d.getFullYear().toString();
if (d.getMonth()+1<10) {
now += "0"+(d.getMonth()+1).toString();
} else {
now += d.getMonth().toString();
}
if (d.getDate()<10) {
now += "0"+d.getDate().toString();
} else {
now += d.getDate().toString();
}
profiles = Math.floor((Number(now)-19850115)/10000)+"歳";
ActionScript を使えば、同ドメイン内の外部のFLASHを読み込む事ができます。
var parts = new MovieClipLoader ();
parts.loadClip("test1.swf" , 1); //1の部分は外部SWFを読み込む場所へのパス
これを応用するとヘッダとフッタを同期したりできますが、そんな事をするくらいなら１つのFLASHで作ったほうが効率的です。
通常 FLASH では、セキュリティの関係上別ドメインのファイルを読み込めない事になっています。アクセス許可などを記述する「クロスドメインポリシーファイル」を使う方法がありますが、別ドメインのファイルを読み込む為にはクロスドメインポリシーファイルを読み込みたいファイルがある別ドメインにアップロードしなくてはいけません。RSSなどを読み込みたい場合、配信先にアップロードする事は難しいです。その場合、PHPさんの力を借りればRSSを読み込めるかもしれません。
var comment:Array = new Array("メッセージ1","メッセージ2","メッセージ3");
var output:String = comment[Math.floor(Math.random()*3)];
少し長いですが、2010年12月のカレンダーを出力します。FLASHですから、枠や装飾はFLASHで描きます。
カレンダーの7*5分だけダイナミックテキストを配置し、プロパティから名前をつける。
（ここでは、d1～d35という名前をつけています。）
calender(2010,12);
function calender(year, month) {
var d:Date = new Date(year, month-1, 1);
var week:Number;
var days:Number;
var day_count:Number = 1;
week = d.getDay();
d.setFullYear(year,month,0);
days = d.getDate();
for (var i = 1; i<=35; i++) {
if (i>week && day_count <= days) {
this["d"+i].text = day_count;
day_count++;
} else {
this["d"+i].text = "";
}
}
}
以上のように結構便利なものがあります。準備欄の事をやってもらってコピーして貼りつけてたら大体のFLASHオーサリングツールで動きますのでどうぞ。
他の方のPHP版、JS版、Ruby版、Python版と比べると ActionScriptは大分畑違いな感じがしますが、一応出来るよという事で書いてみました。
興味のある方はぜひ以下の記事をご覧ください。
(*1) ネタ元の書き出しを踏襲させて頂きました。