グラフィックについて byスマートフォン勉強会@関西#14で話をしました (3)

なかなか説明を書く時間がないので、小出しに書きます。

グラフィックについて

Luaridaのグラフィックについてです。これも何度も書いていますので、簡単に書きます。Luaridaは2つの画面を持っており、メイン画面とワーク画面です。通常描画を行うのはメイン画面に対してです。通常、メイン画面はAndroidの画面と同じ大きさとなっていて、そのままAndroidの画面にflush(転送表示)されます。
また、メイン画面サイズは変更できます。ただし、メイン画面サイズを変更して、Android画面サイズと違ったとしても、Android画面には自動的に縮尺されて表示されます。
ワーク画面はメイン画面のワークとして使うことを目的として用意した画面です。通常メイン画面の縦横二倍の大きさとなっています。png画像などはここに読み込むことができます。また、ワーク画面の画像を直接Android画面にflushすることもでき、この場合は等倍表示となります。

グラフィックデモ

グラフィック機能の説明用に、7つのサンプルプログラムを作ってみました。左上から順番に説明します。あわわ、タイトルがグラフィックDMEOになっている・・・。

文字表示デモ

文字表示デモです。ランダムに文字色を変えながら、「スマートフォン勉強会＠関西＃14でデモ予定のプログラムです。」と表示します。

------------------------------------------
--すまべん用テスト
------------------------------------------
--関数宣言--------------------------------
main={} --mainメソッド

--グローバル変数宣言----------------------

--画面サイズ取得
Gwide, Gheight = canvas.getviewSize()
LuaridaPath=system.getCardMnt().."/luarida"	--luaファイルを保存しているPath
------------------------------------------
mt={}
mt.__newindex=function(mtt,mtn,mtv)
 dialog( "Error Message", "宣言していない変数 "..mtn.." に値を入れようとしています", 0 )
 toast("画面タッチで実行を続けます", 1)
 touch(3)
end
mt.__index=function(mtt,mtn)
 dialog( "Error Message", "変数 "..mtn.." は宣言されていません", 0 )
 toast("画面タッチで実行を続けます", 1)
 touch(3)
end
setmetatable(_G,mt)
--------以下が実プログラム----------------
function main()
local r,g,b
local i,y,s,k
 canvas.putCls(color(255,255,255))
 y = 0
 for i=0,10 do
   r = math.random(256)-1
   g = math.random(256)-1
   b = math.random(256)-1
   s = math.random(20)+10
   k = canvas.drawTextBox("スマートフォン勉強会＠関西＃14でデモ予定のプログラムです。",0,y,s,color(r,g,b), Gwide)
   y = y + k*s
 end
 toast("画面タッチで終了します",1)
 touch(3)
 system.exit()
end
main()

ドロイド君表示デモ

次の2つはドロイド君の表示デモです。これらに関しては、ここで詳しく書いています。ソースも載せています。

ドロイド君整列デモ

ドロイド君を画面に並べるデモです。

• canvas.putg()を使って、ドロイド君を順番に並べています。座標は左上指定です。
• canvas.putrotg()を使って、ドロイド君をランダムに回転させて並べています。回転表示の場合は中心座標を指定します。
• 小型ドロイドくんを並べています。canvas.putg()を用いて半分サイズのドロイド君を描画し、それをcanvas.getg()で取り込んでいます。描画時はランダムな方向に回転させています。
• ドロイド君の連続描画です。10体のドロイド君をランダムな位置にランダムな方向で描画しています。20回描画して終了します。Android1.6なんかだと途中GCでずっこける感がわかると思います。2.3だとCONCURRENT-GCに対応したので、ぬるぬる動くのではないかとと思います。

------------------------------------------
--ドロイドくん描画サンプル02
------------------------------------------
--関数宣言--------------------------------
main={}          --mainメソッド
workdroiddraw={} -- ドロイドくんをWorkBMPのx,y座標に描きます

--グローバル変数宣言----------------------

--画面サイズ取得
Gwide, Gheight = canvas.getviewSize()
LuaridaPath = system.getCardMnt().."/luarida"  --luaファイルを保存しているPath
------------------------------------------
mt={}
mt.__newindex=function(mtt,mtn,mtv)
 dialog( "Error Message", "宣言していない変数 "..mtn.." に値を入れようとしています", 0 )
 toast("画面タッチで実行を続けます", 1)
 touch(3)
end
mt.__index=function(mtt,mtn)
 dialog( "Error Message", "変数 "..mtn.." は宣言されていません", 0 )
 toast("画面タッチで実行を続けます", 1)
 touch(3)
end
setmetatable(_G,mt)
--------以下が実プログラム----------------

------------------------------------------
-- ドロイドくんを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
------------------------------------------
--ドロイドくん描画サンプル
------------------------------------------
function main()
 canvas.putCls()
 canvas.workCls()
 -- ドロイドくんをWorkBMPのx,y座標に描きます
 workdroiddraw( 0, 0 )

 canvas.putCls(color(255,255,255))
 --ドロイドくんを画面に並べます
local i,x,y,d,j
local w = color(255,255,255)
local xs = 56 --ドロイドくんの横幅(表示時)
local ys = 65 --ドロイドくんの高さ(表示時)

 canvas.putCls( w )
 for y=0, Gheight-1, ys do
   for x=0, Gwide-1, xs do
     canvas.putg( x,y,x+(xs-1),y+(ys-1), 0,0,55,64)
   end
 end
 canvas.putflush()

 toast("画面タッチで次を表示します")
 touch(3)

 canvas.putCls( w )
 for y=0, Gheight-1, ys do
   for x=0, Gwide-1, xs do
     local deg = math.random(360)-1
     canvas.putrotg( x+xs/2,y+ys/2,deg, 0,0,55,64)
   end
 end
 canvas.putflush()
 toast("画面タッチで次を表示します")
 touch(3)

 --小型ドロイドくんを作ります
 canvas.putCls()
 canvas.putg( 0,0,27,31, 0,0,55,64)
 canvas.getg( 0,0,27,31, 0,65,27,65+31)

 xs = 56/2
 ys = 65/2
 canvas.putCls( w )
 for y=0, Gheight-1, ys do
   for x=0, Gwide-1, xs do
     local deg = math.random(360)-1
     canvas.putrotg( x+xs/2,y+ys/2,deg, 0,65,27,65+31)
   end
 end
 canvas.putflush()
 toast("画面タッチで次を表示します")
 touch(3)

--10体のドロイド君同時描画
 canvas.getg( 0,0,Gwide-1,Gheight-1,80,0,80+Gwide-1,Gheight-1)
 for i=0,20 do
   canvas.putCls(w)
   --canvas.putg( 0,0,Gwide-1,Gheight-1,80,0,80+Gwide-1,Gheight-1)
   for j=1,10 do
     x = math.random(Gwide-64)+32
     y = math.random(Gheight-64)+32
     d = math.random(360)-1
     canvas.putrotg( x,y,d,0,0,55,64)
   end
   canvas.putflush()
 end

 toast("画面タッチで終了します")
 touch(3)
 system.exit()
end
main()

以上です。