26:画像を表示する

◆PROCESSINGで始めるゲーム作りとコンピュータ

Thunder 26:画像を表示する

今日の話題

 

03:画像を準備する

前回の記事では、点を打つプログラムを通して、PROCESSINGの座標系と図形を描く方法について解説しました。

実際のゲームでは、単純な点や四角形を描く機会は少ないかもしれません。それよりも、あらかじめ用意された綺麗な絵を表示することが多いのではないでしょうか?。

あ、もちろん昔懐かしいレトロ感あふれるゲームを作る場合なら話は別ですね(笑)。例えば以下の画像はATARI社が1980年に発売した「ミサイルコマンド」です。

ss_sheild(画像URL:ガジェット通信 様)

このようなレトロゲームでは、円や四角形の描画が大活躍しそうです。でも今回は予め用意されている綺麗な絵(画像)を表示する方法について考えてみたいと思います。

PROCESSINGでは以下の画像データを表示することが可能です。

  • PNG(ピング)
  • JPEG(ジェイペグ)
  • GIF(ジフ)
  • TGA(ティージーエー)

以降の記事では、透明な画像情報を扱えるPNG形式を対象とします。

透明な画素を扱えるPNG形式のファイルは、キャラクターと背景を重ねあわせる事が多いゲーム制作と非常に相性が良いのです。

例えば下記は、背景が白いJPEG形式のロケットの絵(左)と、背景が透明なPNG形式のロケットの絵(右)を、背景画像の上に並べて表示した例です。

透過画像表示例(画像URL:illust-AC 様:zigzag さん、amiyao さん)

違いは・・・一目瞭然ですよね(笑)。

このように透明な画素を扱えるPNG形式の画像は、背景と綺麗に重ねあわせる事ができるので、とても重宝します。

PROCESSINGで画像データを扱う際には、以下のような注意事項があります。

  • 画像ファイルの拡張子は、.pngにする事(例:rocket.png)※
  • ファイル名には、なるべく日本語を使わない事(例:ロケット.pngは非推奨)
  • 大きな画像データは、処理が遅くなるので注意する事
  • 画像ファイルの格納場所に気をつける事(後述)
  • 画像ファイルは初期化関数(setup)の中で読み込む事(後述)

※JPEG形式なら拡張子は「.jpg」、GIF形式なら「.gif」にします。

最初の2つの注意事項は大丈夫ですよね?。

3番目についてですが、(これも当然といえば当然の事なのですが)大きな画像データは読み込みや表示に時間がかかります。速度が要求されるゲームでは重要になりますので、注意して下さい。

4番目については、少し説明が必要ですね。

画像データや音楽データなど、プログラムから使う様々な情報の事を、専門用語で「リソースファイル」とか「アセット情報」と呼びます。

PROCESSINGでは、リソースファイルはスケッチファイル(プログラムソース)を格納するフォルダに data という名前のフォルダを作成し、その下に格納されいているものとして処理されます。

例えば「sampleGame.pde」という名前のスケッチファイルが
C:\processing-3.1.1\src\sampleGame
というフォルダに格納されているなら

そのリソースファイルは
C:\processing-3.1.1\src\sampleGame\data
の下にある事が前提となります。

dataフォルダ(画像URL:illust-AC 様:zigzag さん、amiyao さん)

リソースファイルを置く場所を変更する事も可能ですが、まずは基本に忠実に、スケッチファイル格納フォルダに data という名前のフォルダを作成し、その中に画像ファイルをおいてください。

今回はGAHAG | 著作権フリー写真・イラスト素材集 様で公開されているパブリックドメインな画像を、学習用に加工して利用させて頂きました。

画像の利用に際しては上記URLを参照いただき、各画像ごとのライセンス条項に従ってください。

●背景用画像
著作者 :LoganArt ID:201503082100

●宇宙船画像
著作者:hector gomez ID:201310241100

私が加工したファイルは以下からダウンロード可能です。

学習用サンプル画像

イメージを表示するための学習用サンプル画像です。各画像を利用される場合はGATAGフリーイラスト素材集 様の各画像ライセンス条項に従ってください。


ダウンロードファイル名:sample03Image.zip

  • 背景用画像 cosmos.png  640×480ピクセル
  • 宇宙船画像 rocket.png   128×128ピクセル

各自で画像を用意して頂いてもOKです。その場合は、上記サイズとファイル名に合わせたPNG形式の画像を用意して下さい。

 

04:画像を背景として表示する

ダウンロードした zipファイルを解凍すると背景用の画像ファイル(cosmos.png)と、宇宙船用の画像ファイル(rocket.png)が出来上がります。

まずは背景用の画像ファイル(cosmos.png)を使い、実行結果ウィンドウの背景を宇宙空間に変えてみましょう。

画像を表示するためには、画像ファイルから画像データを読み取る必要があります。画像ファイルから画像データを取得するには loadImage()命令を利用します。

loadImage():画像ファイルから画像データを取得する

●代表書式
PImage   img  =  loadImage(  String    fileName  ) ;

●引数
fileName  :ファイル名

●戻り値
PImage型の画像データ

●使用例
img = loadImage( “rocket.png” ) ;  //rocket.pngファイルを読み取る

.
fileName に画像ファイル名を指定します。ファイル名は拡張子まで含めた名前にしてください。

画像ファイル名は String型となっています※。String型とは、PROCESSINGで文字列を扱う専門の型です。

そして文字列とは、複数の文字がつながったものです。1文字だけのものを文字、1文字以上の文字がつながっているものを文字列と呼びます。「あ」は文字、「あい」は文字列になります。

文字列は1文字でもOKですが、文字は2文字以上はNGです。PROCESSINGでは、文字を扱う時には char型を、文字列を扱う時には String型を使います。

文字は「’(シングルクォーテーション)」で囲みます。’A’ とか ‘あ’ といった形ですね。文字列は「”(ダブルクォーテーション)」で囲みます。”ANZU” とか “甘納豆” となります。

どっちでもいいじゃん!とも思いますが(笑)、PROCESSINGは「どのようなデータなのか」という事をとても真面目に扱う言語なのです。だから文字と文字列は区別しなければいけません。

文字と文字列2(画像URL:illust-AC 様:無添加豆腐さん)

また、特別な理由がない限り画像ファイルを読み込む処理は、初期化関数(setup)の中で実行してください。

初期化関数はプログラム実行時に1回しか呼びだされません。一方描画処理関数(draw)は、何度も繰り返し呼びだされます。

liadImageのタイミング(画像URL:illust-AC 様:IWAYUU さん、しげる さん、ほんぽさん)

ですから、何度も繰り返し呼び出される関数の中でファイルを読み込むと、動作スピードが遅くなる可能性があります。第一、同じ画像を何度も読み込むのはムダですしね(汗)。

PROCESSINGには、画像データを専門に扱う型があります。それが PImage型です。int型が整数を、String型が文字列を扱う型のように、PImage型は画像データを専門に扱います。※

※正確には PImage や String は単なる「型」ではなく「クラス」なのですが、とりあえず初心者の方は「画像を扱う専門の型」とか「文字列を扱う型」だと覚えておいても良いと思います。

読み込んだ画像データを画面に表示するには、2種類の方法があります。

  • 背景画像として表示する
  • 単体のイメージとして表示する

背景画像として表示するには、background()命令を利用します。

background():背景画像を表示する

●代表書式
void   background(  PImage  img  ) ;
void   background(  color  c  ) ;

●引数
img: 予めPImage型の変数に読み込まれた画像データ
c : color()命令で作成された色情報

●戻り値
なし

●使用例
background(  img  ) ;  //imgへ読み込まれた画像データを背景にする

.
通常、background() 命令は描画処理関数(draw)の中で使います。

background() 命令は、前回の記事で紹介した color() 命令で作成した色を使って、背景をベタ塗りすることも可能です。

background() 命令で利用する画像データのサイズと、size()命令で指定する実行結果ウィンドウの描画領域サイズは、一致している必要があります。ここは注意してください。

サイズが同じであること(画像URL:illust-AC 様:amiyao さん)

例えば今回のように背景画像のサイズが横640、縦480ピクセルの場合は、size()命令でも描画領域のサイズを横640、縦480にする必要があります。

描画領域サイズと背景画像サイズが異なると、エラーとなってしまいます。

Sample03-1

<出力結果>

backgroundSample(画像URL:GAHAG | 著作権フリー写真・イラスト素材集 様 LoganArt )

どうでしょうか?。うまく表示できたでしょうか。

エラーとなった人は、size()命令で指定した縦横のサイズと、背景画像のサイズが同じかどうか、よく確認をしてみてください。

それでは困る・・・というベテランさんには「実行結果ウィンドウの大きさを指定するには(3.X用)」の記事が参考になるかもしれません。興味がある方は参照してみてください。

 

03:任意の場所に画像を置く

つぎは宇宙船用の画像ファイル(rocket.png)を読み込んで、背景画像の上に表示してみましょう。

宇宙船は背景としてではなく、背景の上に単体の画像として表示します。画像を任意の場所に配置するには image()命令を使います。

image():画像データを配置する

●代表書式
void    image(  PImage  img,   int   x,   int   y  ) ;
void    image(  PImage  img,   int   x,   int   y,  int  w,   int  h  ) ;

●引数
img: 予めPImage型の変数に読み込まれた画像データ
x : 画像を表示するX(横)座標
y     : 画像を表示するY(縦)座標
w    :画像の幅
h     :画像の高さ

●戻り値
なし

●使用例
image(  img,  0,  0  ) ;  //座標(0,0)に、imgへ読み込まれた画像データを配置する

.
image() 命令も、普通は描画処理関数(draw)の中で使います。

Sample03-2

<出力結果>

imageSample(画像URL:GAHAG | 著作権フリー写真・イラスト素材集 様 LoganArt 、hector gomez)

上記サンプルでは、rocket という名前のPImage型の変数を用意し、該当変数に “rocket.png” ファイルから画像データを読み込んでいます。

読み込んだ画像データは、描画処理関数の中で座標(0、0)に表示しています。
image動作
図にすると上記のようになります。

注意として、PROCESSINGでは画像は「置いた順番通り」に重ねあわせが行われます。後から置いた画像のほうが上に表示されるわけです。

例えば上記Sample03-2の draw() 関数を以下のようにすると

Sample03-3

<出力結果>
imageSample2
(画像URL:GAHAG | 著作権フリー写真・イラスト素材集 様 LoganArt 、hector gomez)

このような表示になります。

2つのロケット画像が、下図のように重なっているのがお分かりいただけるでしょうか?。

image順番1(画像URL:GAHAG | 著作権フリー写真・イラスト素材集 様 LoganArt 、hector gomez)

PROCESSINGでは後から置いた画像が、必ず上に表示されます。

このように、1つ1つの画像を置く領域を「階層」としてとらえ、階層を重ねあわせて1つの絵を作る事を「レイヤー合成」と呼びます。また1枚1枚の画像を置く階層の事を「レイヤー」といいます。

image順番2(画像URL:牛若丸のブログ 様、キナリノ 様、王国興亡記 様)

PROCESSINGのレイヤー合成は非常にシンプルで、後から置いた画像が上になる程度の事でしかありません。

しかし多くのゲーム専用フレームワーク(UnityやCocos2d-x)では、本格的なレイヤー合成が使われています。将来、これらのフレームワークを使ってゲームを制作したという人は、覚えておきましょう。

 

Forest今日の言葉

・リソースファイル

プログラムの中で利用する様々な情報(画像、音楽、効果音、データファイルなど)の事を、こう呼びます。アセット情報と呼ぶ事もあります。

・文字列

複数(1文字以上)の文字がつながっているものを「文字列」と呼びます。たくさんの人が並んでいる事を「行列」といいますが、1人1人の人間が「文字」で、出来上がっている列が文字列です。多くのプログラミング言語では文字列を扱う際にString型を使います。

・文字

1つの文字の事です。PROCESSINGでは文字を扱うのにchar型を使います。プログラミング言語によっては、文字列も文字もchar型で扱うものがありますが、PROCESSINGでは区別します。

・レイヤー合成

透明なフィルムを重ねるように、階層に分けて画像を重ねあわせる処理の事です。1枚1枚の透明なフィルムに相当する部分(層)をレイヤーと呼びます。

 

scroll今日の文法

・loadImage()命令

img = loadImage( “rocket.png” ) ; のように利用し、画像データをPImage型の変数に読み込みます。

・background( )命令

background(  img  ) ; のように利用し、imgに読み込まれた画像データを背景画像として表示します。

・image( ) 命令

image(  img,  0,  0  ) ; の  ように利用し、imgに読み込まれた画像データを実行結果ウィンドウの指定座標に配置します。

 

 今日のまとめ

  • PNG形式の画像は透明画素が扱えるので便利
  • 背景画像と実行結果ウィンドウのサイズは合わせておく必要がある
  • image()命令で、好き場場所に画像を配置できる

27:画像を動かす へ進む
25:図形を描いてみよう へ戻る
目次へ戻る


本ページで利用している特に参照元記載のないアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。