PR

線や円を描く

Cocos Code IDEとLua言語を使ったサンプルコードと例文集です。

DrawNodeクラスを利用すると、画面に線や円を描画することができます。

サンプルコード

プロジェクトの新規作成で作成されるGameScene.luaのGameScene.create()を下記のサンプルコードと書き換えます。 サンプルコードを実行すると(100, 100)から(200, 250)へ幅2の青い線が描かれます。

function GameScene.create()
    local scene = GameScene.new()

    local drawnode = cc.DrawNode:create()
    drawnode:drawSegment(cc.p(100, 100), cc.p(200, 250), 2, cc.c4f(0, 0, 1, 1))
    scene:addChild(drawnode)

    return scene
end

ss_drawnode.png

線や円を描く例文

線を描く

線や描くにはDrawNodeクラスのdrawSegmentメソッドを使います。

drawnode:drawSegment(cc.p(100, 100), cc.p(200, 250), 2, cc.c4f(0, 0, 1, 1))

DrawNodeクラス:drawSegment(from, to, radius, color)メソッド

半径と色を指定して線分を描きます。

  • (vec2_table) from:始点
  • (vec2_table) to:終点
  • (float) radius:線の半径
  • (color4f_table) color:線色

円を描く

円を描くにはDrawNodeクラスのdrawDotメソッドを使います。円は指定した色で塗りつぶされます。

drawnode:drawDot(cc.p(100, 100), 50, cc.c4f(1, 0, 0, 1))

DrawNodeクラス:drawDot(pos, radius, color)メソッド

指定した位置、半径、色で点を描きます。

  • (vec2_table) pos:中心点
  • (float) radius:半径
  • (color4f_table) color:色

三角形を描く

三角形を描くにはDrawNodeクラスのdrawTriangleメソッドを使います。三角形は指定した色で塗りつぶされます。

drawnode:drawTriangle(cc.p(100, 100), cc.p(200, 100), cc.p(150, 150), cc.c4f(0, 0, 1, 1))

メソッドの説明

DrawNodeクラス:drawTriangle(p1, p2, p3, color)メソッド

色を指定して三角形を描きます。

  • (vec2_table) p1:1点目
  • (vec2_table) p2:2点目
  • (vec2_table) p3:3点目
  • (color4f_table) color:色

ポリゴンを描く

ポリゴンを描くにはDrawNodeクラスのdrawPolygonメソッドを使います。

local points = {cc.p(100, 170),cc.p(220, 190),cc.p(220, 250), cc.p(150, 270)}
drawnode:drawPolygon(points, table.getn(points), cc.c4f(0,0,1,1), 4, cc.c4f(0,1,0,1))

DrawNodeクラス:drawPolygon(verts, count, fillColor, borderWidth, borderColor)メソッド

塗りつぶしの色と線の色を指定してポリゴンを描きます。

  • (point_table) verts:点の配列
  • (int) count:配列のサイズ
  • (color4f_table) fillColor:塗りつぶしの色
  • (float) borderWidth:線幅
  • (color4f_table) borderColor:線の色

ベジェ曲線を描く

2次ベジェ曲線を描くにはDrawNodeクラスのdrawQuadraticBezierメソッドを使います。構成する線の本数を増やすと滑らかな曲線になります。

drawnode:drawQuadraticBezier(cc.p(100, 100), cc.p(200, 100), cc.p(150, 150), 10, cc.c4f(1, 0, 1, 1))

3次ベジェ曲線を描くにはDrawNodeのdrawCubicBezierメソッドを使います。構成する線の本数を増やすと滑らかな曲線になります。

drawnode:drawCubicBezier(cc.p(100, 170),cc.p(220, 190),cc.p(220, 250), cc.p(150, 270), 10, cc.c4f(1, 0, 1, 1))

DrawNodeクラス:drawQuadraticBezier(from, control, to, segments, color)メソッド

色と構成する線の本数を指定して2次ベジェ曲線を描きます。

  • (vec2_table) from:1点目
  • (vec2_table) control:2点目
  • (vec2_table) to:3点目
  • (unsigned int) segments:構成する線の本数
  • (color4f_table) color:色

DrawNodeクラス:drawCubicBezier(from, control1, control2, to, segments, color)メソッド

色と構成する線の本数を指定して3次ベジェ曲線を描きます。

  • (vec2_table) from:1点目
  • (vec2_table) control1:2点目
  • (vec2_table) control2:3点目
  • (vec2_table) to:4点目
  • (unsigned int) segments:構成する線の本数
  • (color4f_table) color:色

画像を消す

描いた画像を消すにはDrawNodeクラスのclearメソッドを使います。

drawnode:clear()

その他のメソッド

DrawNodeクラス:setBlendFunc(src, dst)メソッド

ブレンド係数を設定します。

  • (int) src:前景色に掛ける係数
  • (int) dst:背景色に掛ける係数
drawnode:setBlendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHS) -- 規定値
drawnode:setBlendFunc(gl.SRC_ALPHA, gl.ONE) -- 加算
drawnode:setBlendFunc(gl.ZERO, gl.SRC_COLOR) -- 乗算
drawnode:setBlendFunc(gl.ONE_MINUS_DST_COLOR, gl.ZERO) -- 反転
drawnode:setBlendFunc(gl.ONE_MINUS_DST_COLOR, gl.ONE) -- スクリーン
drawnode:setBlendFunc(gl.ONE_MINUS_DST_COLOR, gl.ONE_MINUS_SRC_COLOR) -- 排他的論理和
Copyright(C) 2014 - 2015 「Cocos Code IDEとLua言語でゲームを作る」逆引き辞典for Lua All rights Reserved.