初心者のためのゲームプログラミング入門

プログラミングとゲームの杜

初心者のためのプログラミング入門 & ゲームプログラムの作り方入門

Processing 入門

21.潜水艦2 画像の表示と入力操作

 

今回は「潜水艦を撃破するゲームを作ろう」の続きです。

題材となるゲームを作成中に思ったのですが
Processing という開発環境はゲーム作りが少し苦手かなぁ、と感じました。
というかゲーム専用のものと比べたら、ちょっと不便なんですね。
まぁ、利用目的が違うので当たり前の話です。
いつか Processing の機能を上手く使って、面白いゲームを作ってみたいものです。

 

 

背景を表示してみよう

画像ファイルを読み込んで、背景を表示してみましょう。
プログラムを次のように変更します。
画像読み込み用の関数 imgLoad を新たに作りました。
タイトルは表示しないので gseq = 1 にしてゲームプレイの表示にします。(25行目)

 

背景を表示する

 

 

説明は後でします。とりあえず実行してみましょう。
次のように、画面の左端に表示されれば成功です。

 

背景の表示

 

 

プログラムと同じ場所にファイルが無かったり、名前を間違えていたりすると
次のようなエラーが表示されます。

 

ファイルの読み込みに失敗

 

 

画像ファイルを表示する手順

画像ファイルを表示する手順は、3段階あります。

1.画像データを扱うための準備
2.画像データを読み込む
3.画像データを表示する

先ほどのプログラムでは次のところです。

 

画像ファイルを表示する手順

 

ここでは宣言した bg の中に画像データの情報を持ちます。
loadImage でファイル名だけ指定した場合には、プログラムと同じフォルダに
画像ファイルを置いておく必要があります。

image を使い画像を表示します。
このとき表示する位置とサイズを指定します。

 

 

画像ファイルを拡大して表示しよう

今は背景の一部のみ表示しています。
これを拡大表示してみましょう。
image のサイズ指定を変更します。

 

画像を拡大して表示する

 

幅だけ 600 にしました。
実行してみます。

 

画像ファイルを拡大して表示

 

ウィンドウと同じ幅に設定したので、横いっぱいに広がりました。

 

 

プレイヤーを表示しよう

もう一枚、画像を表示してみましょう。
次はプレイヤー画像 sm_player.png です。

 

プレイヤー画像を表示

 

 

背景と同じ手順でプレイヤーを表示しています。
一つ違うのは、サイズを指定していません。(32行目)
このように座標だけ指定すれば、画像データと同じサイズで表示されます。

変数を追加しました。変数 px はプレイヤーのx座標、変数 pw は幅に使います。
y座標の変数を作らないのは、y軸を変更することがないからです。

実行してみましょう。

 

プレイヤーと背景を表示する

 

 

プレイヤーを操作しよう

キー押下を調べてプレイヤーを左右に動かしてみましょう。
プレイヤー操作のための関数 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行目)
実行して、左右どちらも画面外へ出ないようになったか確認しましょう。