第4章:ハイスコアを表示する(その4) 

こんにちは、MSLABOです。

これまではGAMEOVER時に、前回までの最高得点と、今回の得点を文字として表示してきました。しかしゲームなどでは、よく得点を画像で表示する事があります。

そこで今回から数回に渡り、ゲームオーバー時の得点表示を、文字ではなく画像で表示する方法について解説し、より見栄えのする(ゲームらしい)表示にしてみたいと思います。

4.44 完成画面イメージと下準備
まずはゲームオーバー画面のデザインを少し変更して、以下の様な画面を作成したいと思います(クリックすると拡大表示します)。

gameOver5
左がこれまで作成してきた画面、中央が新しい画面です。
これまでは、得点を「最高得点 : nnn」と「今回の得点:nnn」といった形で、文字で表していました。

新しい画面では「最高得点 :」と「今回の得点:」という部分は、これまでと同じように文字で行いますが、「nnn」の部分=得点の表示部分を絵に置き換えたいと思います。またこれに伴って、「記録更新」という画像の表示位置も変更します。

例えば最高得点が14点の場合、以下のような表示を行うことにします。
gameOver6

私が†Judas†さん、ラッパさんの素敵な絵を組み合わせて作成した得点画像でよければ、以下からダウンロード可能です。
number

得点画像

†Judas†さん、ラッパさんの絵を組み合わせて作成した画像です。ご自身で用意する場合はPNG形式の画像(縦横48ピクセルの正方形画像)を、1つの数字に1つの画像として用意して頂いてもOKです。

(参考画像URL:illust-AC 様:†Judas†さん、ラッパさん)

自分で画像を用意されたい方は、縦横48ピクセルの正方形のpng形式画像を、1つの数字に1つの画像として用意します。そして、それぞれの画像を「00.png」から「09.png」という名前で保存してください。

画像が用意できたら、00.pngから09.pngまでの10個の画像を、スケッチフォルダ(プログラムソース)の下にあるdataフォルダに格納します。eclipseを使われている方は、下図のようにパッケージエクスプローラーのdataフォルダにコピーしてください。

numberFile

 

4.45 得点画像の読み込み
「最高得点 :」という最初の文字は、画面上端から212ピクセルいった所から表示する事にします。また得点画像は、画面上端から200ピクセルいった所から表示します。最高得点を更新した時に表示する「記録更新」という画像は、画面上端から440ピクセルいったところから表示します。

gameOver7
これらは、全て定数として定義しておきましょう。

続いて、初期処理関数(setup)で、得点画像を読み取ります。
今回は data フォルダの下にある 00.png から 09.png の10個の画像を読み取ります。

たとえば以下のようプログラミングするのも1つの手ですが・・・、ちょっとダサいですね(汗)。

せっかくですから、ここは今まで学習した「配列変数」とループ処理を使って読み取る事にしましょう。具体的には以下のような感じになります。

まず、以下の部分に注目してください。

これは画像を扱う専用の型である PImage 型の変数(pNumber)を、配列として宣言している箇所になります。

配列変数を忘れちゃった方は「第4章:ハイスコアを記録する(その4)」を参照してくださいね。簡単に言うと、同じ型の変数を連続した箱として用意し、添字で簡単に操作できるようにしたものです。

用意した箱を実際に作っているのが

上記部分になります。

ここではPImage型の情報を格納する箱を10個用意しています。ここに00.png から 09.png の10個の画像を読み取ります。

loadImage()では、読み取るファイル名を指定します。ファイル名は 0 + 番号+[.png]形式の名前になっています(00.pngなど)ので、nf()命令で先頭に0を補った00、01、02、03といった文字列を生成し、ファイル名を作成しています。

 

4.46 得点表示関数を変更する
描画処理関数(draw)からゲームオーバー時に呼び出す得点表示関数(dispHighScore)の処理を変更します。

参考までに、これまで作成した得点表示関数は以下のような処理でした。

まず変更する箇所は、fTokutenPixl で「最高得点 : nnn」という文字列の幅を取得し、それを元に画面中央に配置するために横座標を iHX として計算している箇所です。

今回は「最高得点 :」部分の文字幅は従来通りですが、それに続けて絵で得点を3つ並べますので、全体の表示幅は

になります。図にすると下のような感じです(クリックすると拡大します)。
数字絵幅計算
これを画面中央に配置しますので、横の開始座標は

で計算できます。

次に文字の表示原点を左上に変更しましょう。文字の表示原点は初期状態で文字の左下です。絵の原点は左上ですので、扱いにくいんですよね。ですから統一的に全て左上原点に変更しておきます。
原点変更
文字の表示原点については「第4章:ハイスコアを表示する(その1)」の記事を参照してください。
genten

文字の原点を変更するには textAlign() 命令を使用します。
textAlign( 横位置、縦位置 );  で指定します。

横位置には LEFT(左端)、RIGHT(右端)、CENTER(中央)
縦位置にはTOP(上端)、CENTER(中央)、BASELINE(基点)、BOTTOM(下端)
が指定可能です。

BASELINEって何?という方も見えるかもしれませんね。BASELINEというのは、「文字の一番下から少し上にいった位置」の事です。

???でしょうか・・・。ベースラインは日本語を使っている場合は、あまり気にする必要はありません。しかしアルファベットを使う際に、文字を綺麗に並べるためには、不可欠な考え方になります。
ベースライン
上の図を見てください。

アルファベットにはpやqのように髭(縦棒)が長い文字が幾つかあります。またiやjのように上に点が飛び出ているデザインの文字もあります。

これを単純に文字の下端をそろえて並べると、図の上のように文字全体がガタガタに見える事があります。「そんなの、かっちょ悪いじゃん」と考えた人がいたようで、文字がバランスよく並ぶ基点(ベースライン)を元に、横に並べた際に綺麗に見えるようにしました。

日本語や漢字は真四角なデザインのものが多いため、こんな面倒くさい事は意識せずに済むのですが・・・コンピュータは英語圏文化の産物ですので・・・しょうがありませんね(汗)。

より詳しく知りたい方は、PROCESING逆引きリファレンスにある「文字を揃えるには」記事や「文字のアセントとディセント」記事を参考にしてください。

例えば今回のように文字の左上を原点にするには

と指示します。

考え方は複雑ですが、命令は簡単ですね(笑)。

《次回の予定》
今回はここまでとします。次回はこの続き(絵文字の表示方法)などを説明したいと思います。


《覚えたこと》
ベースラインとは

《覚えた関数》
textAlign()

次章:
第4章:ハイスコアを表示する(その5)  へ進む  (執筆中)

前章:
第4章:ハイスコアを表示する(その3)   へ戻る

目次:
目次 へ戻る


◆よりプログラミングを楽しみたい方、プログラム作成のお供に:
PROCESSING逆引きリファレンス


★お知らせ★
よりわかり易く読みやすい記事を目指して「PROCESSINGで始めるゲーム作りとコンピュータ」の記事を改定しています。

改定版の記事は以下から閲覧できます。よろしければ、どうぞ。

(改定版)PROCESSINGで始めるゲーム作りとコンピュータ