Processing 入門
21．潜水艦２ 画像の表示と入力操作
今回は「潜水艦を撃破するゲームを作ろう」の続きです。
題材となるゲームを作成中に思ったのですが
Processing という開発環境はゲーム作りが少し苦手かなぁ、と感じました。
というかゲーム専用のものと比べたら、ちょっと不便なんですね。
まぁ、利用目的が違うので当たり前の話です。
いつか Processing の機能を上手く使って、面白いゲームを作ってみたいものです。
背景を表示してみよう
画像ファイルを読み込んで、背景を表示してみましょう。
プログラムを次のように変更します。
画像読み込み用の関数 imgLoad を新たに作りました。
タイトルは表示しないので gseq = 1 にしてゲームプレイの表示にします。（25行目）
説明は後でします。とりあえず実行してみましょう。
次のように、画面の左端に表示されれば成功です。
プログラムと同じ場所にファイルが無かったり、名前を間違えていたりすると
次のようなエラーが表示されます。
画像ファイルを表示する手順
画像ファイルを表示する手順は、３段階あります。
１．画像データを扱うための準備
２．画像データを読み込む
３．画像データを表示する
先ほどのプログラムでは次のところです。
ここでは宣言した bg の中に画像データの情報を持ちます。
loadImage でファイル名だけ指定した場合には、プログラムと同じフォルダに
画像ファイルを置いておく必要があります。
image を使い画像を表示します。
このとき表示する位置とサイズを指定します。
画像ファイルを拡大して表示しよう
今は背景の一部のみ表示しています。
これを拡大表示してみましょう。
image のサイズ指定を変更します。
幅だけ 600 にしました。
実行してみます。
ウィンドウと同じ幅に設定したので、横いっぱいに広がりました。
プレイヤーを表示しよう
もう一枚、画像を表示してみましょう。
次はプレイヤー画像 sm_player.png です。
背景と同じ手順でプレイヤーを表示しています。
一つ違うのは、サイズを指定していません。（32行目）
このように座標だけ指定すれば、画像データと同じサイズで表示されます。
変数を追加しました。変数 px はプレイヤーのｘ座標、変数 pw は幅に使います。
ｙ座標の変数を作らないのは、ｙ軸を変更することがないからです。
実行してみましょう。
プレイヤーを操作しよう
キー押下を調べてプレイヤーを左右に動かしてみましょう。
プレイヤー操作のための関数 playerMove を作ります。
ここで使っているキー操作のシステム変数は次の通りです。
| KeyPressed | キーが1つでも押されていると true。そうでなけれ false |
|---|---|
| key | 最後に押されたキー |
| keyCode | 最後に押されたキーのキーコード |
カーソルキーが押されたか調べるときは、まず key == CODED かどうか調べ
次に keyCode を使って判定します。
keyCode での判定が可能なものは、
UP、DOWN、LEFT、RIGHT、ALT、CONTROL、SHIFT
があります。
ちなみに、アルファベットキーや BACKSPACE、TAB、ENTER、RETURN、ESC、
DELETEキーのときは、key でそのまま判定できます。
keyCode を使う必要がありません。
それでは実行してみましょう。
左右のカーソルキーでプレイヤーを動かせるか確認しましょう。
（ 注意 ）
ときどきですが、実行したときキー操作できないことがあります。
そんな時はゲーム画面をマウスでクリックしてみてください。
キー操作できるようになります。
画面の外へ出ないようにしよう
プレイヤーを左右に移動させられるようになりました。
しかし、ずっと移動を続けていると画面の外へ出てしまいます。
画面の外へ出ないように制限を付けます。
画面の幅 600 からプレイヤーの幅 pw を引いて、右移動の制限をしています。（46行目）
実行して、左右どちらも画面外へ出ないようになったか確認しましょう。