shi3z式ゲームプログラミング #6 覚えておくといいテクニック

shi3zだ。
この短期集中連載。本当に短期に集中していて僕も驚いているが、ゲームを作るために必要な本当の意味での基礎の基礎は前回までで一通り教えたつもりなんだ。

でもねー、もちろんゲームとはそれだけでは完成しない。
それに、「ゲームっぽく作るなら○○がしたいんだけどどうすればいいんだろう」という疑問にも答えておきたい。

そこで今回はゲームを作る上で知っておくと便利な諸々の知識について紹介するぞ

続きは以下のリンクから

好きな画像を表示したい

タイトル画面やゲームオーバー画面、そのほか、キャラクターの画面とかまあいろいろと好きな画像を表示したいことはあるだろうね。

キャラクターの表示はImageクラスを使うと便利だけど、大きな画像を表示するにはあまり向いてない。
大きな画像を表示したかったら、いっそLabelクラスを使った方が早いぞ

function onLoad() {
imageLabel = new Label(
"<img src='http://wise9.tv/img/logo15.png' alt='' />",30,200); // A src=のあとに画像のURLを書いている

}

このシンプルなコードを実行するとこんな感じ

どう?
便利でしょ。

ちなみにブラウザ上で画像を右クリックして「イメージのアドレスをコピー」すると、画像のURLを簡単に取り出すことができる。

これさえ知っていればなんでも自分のプログラムに登場させることができるぞ。
また、PC側に保存されている画像を使いたい場合は、imgフォルダにコピーして"img/ファイル名"として呼び出すか、gyazoというソフト(http://gyazo.com/ja)を使うとPC上にある画像を瞬間的にアップロードしてURLを発行してくれるぞ。

ボタンを出現させてユーザに押させたい

ボタン、いわゆるを出したいこともあるだろう。
これを押させてゲームを進行させたいこともあるに違いない。

これもLabelクラスを使えば瞬間OKだ。

callback = function(name){ //Aコールバック関数を定義
alert(name+"がおされた!");
};

function onLoad() {
buttonLabel = new Label(
"
<input onclick='callback(¥"りんご¥")' type='button' value='りんご' />"+ //B りんごボタン
"
<input onclick='callback(¥"みかん¥")' type='button' value='みかん' />" //C みかんボタン
,30,200);

}

Aでクリックされたときに実行されるコールバック関数を書いている。
コールバック関数は大人の事情で変数のように書いているが単なる関数宣言であることに変わりはない。

さて、BとCではHTMLでラベルに直接ボタンを出現させている。

このHTMLに注目してみよう。

"<input type=button onclick=callback('りんご') value='りんごボタン'>"

これ、いくらかは解説が必要だろう。
<input>タグは、お察しの通り、なにかを入力してもらうためのタグだ。
そこにtype=buttonという文字列を付け加えると(これを属性と呼ぶ)、ボタンになる。試しに「type=text」に変えるとテキストボックスになってしまう。

続くonclick=では、お察しの通りコールバック関数を指定している。
ここで注意したいのは'りんご'と「"(ダブルクオーテーション)」ではなく、「'(シングルクオーテーション)」で囲んでいるところだ。

実はJavaScriptではダブルクオーテーションとシングルクオーテーションは同じ意味である。
ではなぜ同じ意味の記号が二種類混在しているのか?

それはまさしくこのような場合のときに使う。
よく見てほしい。「<input type=button」から始まる全体が「"(ダブルクオーテーション)」で囲まれていて、callbackの後に続くパラメータ列の'りんご'だけがシングルクオーテーションで囲まれている。

こうすると、シングルクオーテーションでくくった部分も含めて全体をダブルクオーテーションで囲むことができる。

このテクニックを使わないとプログラムはおかしくなってしまうから注意が必要だ。
さらに、つづくvalueでは、実際のボタンに表示される文字を指定している。

これで「りんごボタン」を押すとcallback関数に「りんご」というパラメータが渡されて「りんごがおされた」とアラートが表示されるというわけだ。

ボタンはLabelに書いてあるので、Labelを動かすことも出来る。
Labelを動かすには以下のようにする

callback = function(name){
buttonLabel.setXY(rand(320),rand(480)); //A ラベルを移動
};

function onLoad() {
buttonLabel = new Label( // ↓onclickのかわりにonmouseoverを使用
"
<input onmouseover='callback()' type='button' value='押して押して' />" //B
,30,200);
}

ボタンを押そうとしてマウスカーソルを近づけるとランダムにワープして逃げるラベルができあがった。