コンピュータを楽しもう!!

今、自分が面白くていろいろやってみたことを書き綴りたいと思います。連絡先はtarosa.yでgmail.comです。

ドロイドくんを描く

Luarida v1.59Betaで、canvas.putCls()という引数無しの命令を追加しました。これを追加した意図は、表題にあるように、ドロイドくんを描きたかったからです。元々、Luaridaのコマンドには、canvas.putLineやcanvas.putRect、canvas.putCircleがあるので、これらを使って絵を描けますが、無色を描くことができなかったのです。
従来の描画命令で、透過色を指定して絵を描くと、透過率によって下地が見えます。よって、色が無い"無色"という色を描けませんでした。今回のcanvas.putCls()コマンドは、メイン画面を無色にするというコマンドです。無色となったメイン画面に絵を描くことにより、透過色有りの図柄を描けるようになりました。

ドロイドくんを描いてみる

それでは、メイン画面にドロイドくんを描いて、それをワーク画面に取り込みたいと思います。このように、png画像データを取り込まなくても、メイン画面でお絵かきした透過付き画像をワーク画面に取り込むことができるようになりました。
ドロイドくんの色は、R=164, G=198, B=57とします。目の色は白にしました。そして、メイン画面を無色にした後、各パーツを描いてワーク画面に取り込みます。ドロイドくんのサイズは、56×65ピクセルとなりました。描いていたら、このサイズにたまたまなってしまいました。

------------------------------------------
-- ドロイドくんをWorkBMPのx,y座標に生成します
------------------------------------------
function workdroiddraw( wx, wy )
local dcol = color(164,198,57)
local ecol = color(255,255,255)
local x, y = 0, 0
  --MainBMPを透明色に塗りつぶす
  canvas.putCls()
  --顔を描く
  canvas.putCircle( x+28,y+23,19,dcol, 1 )
  canvas.putCircle( x+20,y+13,1,ecol, 1 )
  canvas.putCircle( x+36,y+13,1,ecol, 1 )
  --角を描く
  canvas.putLine( x+16,y+0,x+19,y+5,dcol)
  canvas.putLine( x+16,y+0,x+20,y+5,dcol)
  canvas.putLine( x+40,y+0,x+35,y+5,dcol)
  canvas.putLine( x+40,y+0,x+34,y+5,dcol)
  --顔をWorkBMPに描画
  canvas.getg( x+10,y+0,x+45,y+19,wx+10,wy+0,wx+45,wy+19 )
  --再びMainBMPを透明色に塗りつぶす
  canvas.putCls()
  --体を描く
  canvas.putCircle( x+15,y+48,4,dcol, 1 )
  canvas.putCircle( x+41,y+48,4,dcol, 1 )
  canvas.putRect( x+10,y+22,x+45,y+48,dcol,1 )
  canvas.putRect( x+15,y+48,x+41,y+51,dcol,1 )
  --足を描く
  canvas.putCircle( x+22,y+61,4,dcol, 1 )
  canvas.putRect( x+18,y+51,x+25,y+61,dcol,1 )
  canvas.putCircle( x+34,y+61,4,dcol, 1 )
  canvas.putRect( x+30,y+51,x+37,y+61,dcol,1 )
  --腕を描く
  canvas.putCircle( x+52,y+24,4,dcol, 1 )
  canvas.putCircle( x+52,y+41,4,dcol, 1 )
  canvas.putRect( x+48,y+25,x+55,y+40,dcol,1 )
  canvas.putCircle( x+4,y+24,4,dcol, 1 )
  canvas.putCircle( x+4,y+41,4,dcol, 1 )
  canvas.putRect( x+0,y+25,x+7,y+40,dcol,1 )

  --体をWorkBMPに取得する
  canvas.getg( x,y+20,x+55,y+64, wx, wy+20, wx+55, wy+64 )
end

下が描いたドロイドくんです。

透過色も使用できていることを見るために下記のようなプログラムを使って書いてみました。

------------------------------------------
--ドロイドくん描画サンプル
------------------------------------------
--画面サイズ取得
Gwide, Gheight = canvas.getviewSize()

function main()
  canvas.putCls()
  canvas.workCls()
  -- ドロイドくんをWorkBMPのx,y座標に描きます
  workdroiddraw( 0, 0 )

local x
local w = color(255,255,255)
  canvas.putCls( w )
  for x=0, Gwide-1, 10 do
    local r = math.random(256)-1
    local g = math.random(256)-1
    local b = math.random(256)-1
    canvas.putRect( x,0,x+9,Gheight-1, color(r,g,b),1)
  end
  --ドロイドくんの描画
  canvas.putg( 0,0,55,64, 0,0,55,64)
  canvas.putflush()
  touch(3)
end
main()

ちゃんと、透過していますね。