画像を任意の場所に描画するには

◆PROCESSING 逆引きリファレンス

 カテゴリー:イメージ処理

画像を任意の場所に描画するには

【解説】
loadimage()で読み込んだ画像データを、実行方法ウィンドウ上の任意の場所に表示するには、image()命令を利用します。
PROCESSINGでゲームを作る場合、宇宙船やUFOを画面上の任意の場所に表示する代表的な手法になります。

【構文】
image(img, x, y )
image(img, x, y, w, h )

【パラメータ】
img:PImage:画像データ。
x:float:画像を置く位置。通常は左上のX(横)座標。
y:float:画像を置く位置。通常は左上のY(縦)座標。
w:float:画像の幅。
h:float:画像の高さ。

x, y, w, h はimageMode()の指定により意味が異なります。
下図を参考にしてください(クリックすると、拡大します)。

imageModeとimage【戻り値】
void

【注意】
xとyは通常は画像を置く左上座標ですが、imageModeで指定された場合は意味が異なります。同じようにwとhも通常は画像の幅と高さですが、imageModeで指定された場合は意味が異なります。

初期値(デフォルト)のimageModeは CORNER です。

【関連記事】
第3章:改定版-ゲーム画面を作成しよう(その2)


●imageMode(CORNER)の例:

<出力結果:画像URL:easyicon.net 様 2018/03 Link元が削除されました>
image_CORNER
UFO画像の大きさは、縦64pixl、横64pixlです。
そのままの大きさ(wとhを未指定)でX=96、Y=96の座標に配置しています。

 

●imageMode(CORNER)の例2:

<出力結果:画像URL:easyicon.net 様  2018/03 Link元が削除されました>
image_CORNER2
画像を配置する際に、wとhを指定して画像の大きさを変更しています。
このように、画像を配置する際に大きさを変えることも可能です。

 

●imageMode(CORNERS)の例:

<出力結果:画像URL:easyicon.net 様  2018/03 Link元が削除されました>
image_CORNERS
imageMode()を CORNERS にして、wとhを対角座標に変更しています。
結果、UFO画像の表示サイズが変わることに注意してください。

 

●imageMode(CENTER)の例

<出力結果:画像URL:easyicon.net 様  2018/03 Link元が削除されました>
image_CENTER
X、Yを中心座標に、幅128、高さ128の画像を配置していす。

●応用例

<出力結果:画像URL:easyicon.net 様 2018/03 Link元が削除されました、phost-AC 様>
ufoClicked
マウスをクリックすると、クリックした位置にUFOが描かれて、左右どちらかの端へ向かって移動します。

 


PROCESSING逆引きリファレンス一覧 へ戻る

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)