Moai SDK を使う
 All Files Functions Variables Pages
画面と画像を表示させる

概要

スクリプトの紹介と実行

まず、下記のスクリプトを hello_moai.lua というファイル名で保存します。

sample/hello_moai.lua

1 --! \example
2 --! \brief 画面を作成して、画像を表示する
3 
4 -- 画面を作成する
5 local screen_width, screen_height = 640, 480
6 MOAISim.openWindow('hello_moai', screen_width, screen_height)
7 
8 
9 -- 画面の利用範囲を設定する
10 local viewport = MOAIViewport.new()
11 viewport:setSize(screen_width, screen_height)
12 viewport:setScale(screen_width, screen_height)
13 
14 -- 画像を配置するためのレイヤーを作成して登録する
15 local layer = MOAILayer2D.new()
16 layer:setViewport(viewport)
17 MOAIRenderMgr.setRenderTable({layer})
18 
19 
20 -- 画像リソースを読み込む
21 local deck = MOAIGfxQuad2D.new()
22 deck:setTexture('rect.png')
23 local width, height = 100, 100
24 deck:setRect(-width/2, -height/2, width/2, height/2)
25 
26 -- 読み込んだリソースをレイヤーに登録して実際に表示する
27 local prop = MOAIProp2D.new()
28 prop:setDeck(deck)
29 layer:insertProp(prop)
30 
31 
32 -- 3.0 秒で 360 回転させる
33 prop:moveRot(360, 3.0)
_G window height
作成したウィンドウの高さ
Definition: Gui.lua:9
function Image_label new(arg_1st, width, height)
画像ラベル
_G viewport
ウィンドウの大きさの viewport
Definition: Gui.lua:12

それから、スクリプトで使う画像も保存して、同じフォルダに配置して下さい。

rect.png
hello_moai.lua で使う画像

後は、コマンドラインにおいて moai コマンドにファイルのパスを渡すことで、そのスクリプトを実行できます。

$ moai hello_moai.lua

実行結果のスクリーンショット

hello_moai_screenshot.png

このような画像が表示されれば、スクリプトは適切に動作しています。

解説

コードをブロックごとに解説していきます。

画面の作成

Moai SDK では、下記のコードのみから成るスクリプトで画面を作成して表示することができます。

-- 画面を作成する
local screen_width, screen_height = 640, 480
MOAISim.openWindow('hello_moai', screen_width, screen_height)

このコードでは、640x480 の画面を作成しています。
実際に iOS, Android で動作させる場合には、そのデバイスに適したサイズにすることと、画面を横長で使うのか縦長で使うのかの設定が必要です。

例えば iPhone や Nexus 7 で画面サイズを取得するには下記コードのようにします。

local width = MOAIEnvironment.horizontalResolution
local height = MOAIEnvironment.verticalResolution

この MOAIEnvironment.horizontalResolution という値は Windows, Linux, Mac の場合には nil が返されるため「実行するデバイスの解像度の画面を作成したいけれども、開発時にホスト上で実行するときには 640x480 の画面にしたい」という場合には、下記のようなコードにすると良いでしょう。

local width = MOAIEnvironment.horizontalResolution or 640
local height = MOAIEnvironment.verticalResolution or 480

viewport の設定

viewpoint は、どの範囲を画面に表示するかの設定です。
このコードでは、画面全体を 640x480 とみなして表示するように設定しています。

-- 画面の利用範囲を設定する
local viewport = MOAIViewport.new()
viewport:setSize(screen_width, screen_height)
viewport:setScale(screen_width, screen_height)

Moai SDK では、以降で説明する layer を viewport に登録し、layer に描画したい部品を配置することで描画を行う仕組みになっています。

layer の作成と登録

layer は描画したい部品を登録するもので viewport に対して複数登録できます。

viewport_layers_image.svg

このコードでは、1つの layer を作成した上で、その layer が描画対象になるように MOAIRenderMgr.setRenderTable() で設定しています。以下は、layer が2つある場合の例です。

MOAIRenderMgr.setRenderTable({back_layer, front_layer})

レイヤーは、背景用のレイヤー、キャラクター用のレイヤーなど、必要に応じて複数のレイヤーを使い分けると便利です。

画像リソースの読み込みと layer への登録

Moai SDK では画像などの「何を描画するか」という情報を deck と呼んで管理し、それをどこに表示するかといった「位置や大きさ」の情報を prop で管理しています。例えば、1つの画像を2箇所に表示する場合、コードは以下のように書けます。

-- 画像ファイルを読み込んで deck を作成し、大きさを指定する
local deck = MOAIGfxQuad2D.new()
deck:setTexture('rect.png')
local width, height = 100, 100
deck:setRect(-width/2, -height/2, width/2, height/2)
-- 1つ目の prop を作成して layer に登録する
local prop1 = MOAIProp2D.new()
prop1:setDeck(deck)
prop1:setLoc(-60, 0)
layer:insertProp(prop1)
-- 2つ目の prop を作成して layer に登録する
local prop2 = MOAIProp2D.new()
prop2:setDeck(deck)
prop2:setLoc(60, 0)
layer:insertProp(prop2)

アニメーション

このサンプルでは、最後に作成した prop に対して簡単なアニメーションを行うように設定しています。

-- 3.0 秒で 360 回転させる
prop:moveRot(360, 3.0)

まとめ

以上が Moai SDK の簡単な説明です。
以降では Moai SDK に用意されている機能を、もう少し詳しく紹介していきます。