今回はCorona SDK で四角形（正方形や長方形）を表示する方法です。

 

1．関数の説明

　リファレンスを見ると関数と引数は以下の通りです。

display.newRect( [parentGroup,] x, y, width, height )
注：大かっこ（[と]）で囲まれている引数は省略可能を意味しています。

引数名	説明
parentGroup	[省略可能] 登録するグループを指定
x	四角形の中心のx座標
y	四角形の中心のy座標
width	四角形の横幅
height	四角形の高さ

　戻り値は「shape Object」（シェイプ・オブジェクト）になります。

 

1.1 使用方法

　座標(100, 100)に横幅が100、高さが60の四角形を表示するには以下のように記述します。白い線は「x=100」と「y=100」の線です。newRect関数で指定するxとyの座標は、出力する四角形の中心座標になります。

display.newRect(100, 100, 100, 60)

 

2．シェイプ・オブジェクトのプロパティ

　シェイプ・オブジェクトのプロパティについて説明します。

 

2.1 外枠の線の太さ：object.strokeWidth

　シェイプ・オブジェクトが持つ「strokeWidth」を変更すると四角形の外枠の線の太さを変更することができます。

— 初期の色
local rect1 = display.newRect(display.contentCenterX, 100, 100, 50)

— 外枠の太さを設定（わかりやすくするため、中を黒くしてます）
local rect2 = display.newRect(display.contentCenterX, 200, 100, 50)
rect2.strokeWidth = 1
rect2:setFillColor(0, 0, 0)

 

 

2.1 外枠の線の色：object.stroke

　シェイプ・オブジェクトが持つ「stroke」を変更すると四角形の外枠の線の太さを変更することができます。

— 初期の色
local rect1 = display.newRect(display.contentCenterX, 100, 100, 50)

— 外枠の線を赤色に設定（線をわかりやすくするため、中を黒くしてます）
local rect2 = display.newRect(display.contentCenterX, 200, 100, 50)
rect2.strokeWidth = 3
rect2.stroke = {1, 0, 0}
rect2:setFillColor(0, 0, 0)

 

 

2.3 角の座標：object.path

　シェイプ・オブジェクトが持つ「path」を変更すると四角形の四隅の座標を変更することができます。四隅の座標は以下のようになっています。

local rect1 = display.newRect(display.contentCenterX, 100, 100, 50)

local rect2 = display.newRect(display.contentCenterX, 200, 100, 50)
rect2.path.x4 = -20

local rect3 = display.newRect(display.contentCenterX, 300, 100, 50)
rect3.path.x2 = 20
rect3.path.x4 = -20

local rect4 = display.newRect(display.contentCenterX, 400, 100, 50)
rect4.path.x2 = 20
rect4.path.y2 = -20
rect4.path.x4 = -20
rect4.path.y4 = 20

 

 

2.4 塗りつぶす、絵をはる：object.fill

　シェイプ・オブジェクトが持つ「fill」を変更すると四角形の色を変えたり、絵をはることができます。

local rect = display.newRect(display.contentCenterX, display.contentCenterY, 200, 150)
local paint = {
type = “image”,
filename = “test.jpg”,
}
rect.fill = paint

 

　2枚の絵を重ね合わせるなんてこともできます。サンプルの画像を2枚重ねています。
local rect = display.newRect(display.contentCenterX, display.contentCenterY, 200, 150)
local paint = {
type = “composite”,
paint1 = {type = “image”, filename = “test.jpg”},
paint2 = {type = “image”, filename = “test2.png”},
}
rect.fill = paint
rect.fill.effect = “composite.average”

 

　「fill」プロパティには他にも機能があるので、色々と試してみてください。

 

3．シェイプ・オブジェクトの関数

　シェイプ・オブジェクトの関数について説明します。

 

3.1 色を変更：object:setFillColor()

　シェイプ・オブジェクトが持つ「setFillColor」関数を呼び出すと、色を変更することが可能です。
object:setFillColor( gray )
object:setFillColor( gray, alpha )
object:setFillColor( red, green, blue )
object:setFillColor( red, green, blue, alpha )
object:setFillColor( gradient )

※ 色の設定方法に関しては「ペイントテーブル」を参照してください。

local rect = display.newRect(display.contentCenterX, display.contentCenterY, 200, 150)
rect:setFillColor(1, 1, 0, 1)

 

 

3.2 枠の色の変更：object:setStrokeColor()

　シェイプ・オブジェクトが持つ「setStrokeColor」関数を呼び出すと、枠の色を変更することが可能です。
object:setStrokeColor( gray )
object:setStrokeColor( gray, alpha )
object:setStrokeColor( red, green, blue )
object:setStrokeColor( red, green, blue, alpha )

※ 色の設定方法に関しては「ペイントテーブル」を参照してください。

local rect = display.newRect(display.contentCenterX, display.contentCenterY, 200, 150)
rect.strokeWidth = 10
rect:setStrokeColor(1, 1, 0, 1)

 

 

       

＜更新履歴＞

版	更新日	Corona SDKのバージョン
新規作成	2015年7月9日	v2015.2646