Moai SDK でゲームを作ろう(画面の作成まで)

それでは、画面の作成までの準備です。ここまでに Moai SDK で moai-dev/ant/untitled-host ディレクトリが作成されており、実行できるプロジェクトがあるとします。

バージョン管理の開始

まず、moai-dev から必要なファイルだけをコピーしましょう。Android で実行する場合、untitled-host/build/project フォルダがあれば動作できるので、このフォルダを別の場所にコピーしてバージョン管理の対象とします。project というディレクトリ名は自由に変更して問題ありません。また、作成中のプログラムをホスト環境で実行するために moai-dev/cmake/moai/moai バイナリを(例えば) $(HOME)/bin などにコピーします。
以降は、主に project/assets/lua/ 以下の Lua スクリプトを編集します。

アプリ名、アイコンの変更

Android で実行したときのアプリ名は project/res/values/strings.xml で管理されています。このファイルの app_name には、日本語も O.K. です。

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ずん子と封印の城</string>
</resources>

次にアイコンですが、これは project/res/drawable-* の各ディレクトリに、それぞれの大きさの icon.png という名前の PNG 画像を作成して配置すれば変更できます。

  • drawable-ldpi … 36 x 36
  • drawable-mdpi … 48 x 48
  • drawable-hdpi … 72 x 72
  • drawable-xhdpi … 96 x 96

zunko_icon_2014_0105

resource/icon.png という 96×96 のファイルを用意し、それを ImageMagic を使って縮小しながら ref ディレクトリに配置する Makefile は、例えば以下のようになります。

image.png (96×96) を縮小しながらコピーする Makefile

RES_DIR = ../source/res

all : icons
clean :

icons : \
??? $(RES_DIR)/drawable-ldpi/icon.png \
??? $(RES_DIR)/drawable-mdpi/icon.png \
??? $(RES_DIR)/drawable-hdpi/icon.png \
??? $(RES_DIR)/drawable-xhdpi/icon.png \

$(RES_DIR)/drawable-ldpi/icon.png : icon.png
??? convert -geometry 36x36 icon.png $@

$(RES_DIR)/drawable-mdpi/icon.png : icon.png
??? convert -geometry 48x48 icon.png $@

$(RES_DIR)/drawable-hdpi/icon.png : icon.png
??? convert -geometry 72x72 icon.png $@

$(RES_DIR)/drawable-xhdpi/icon.png : icon.png
??? cp $< $@

ウィンドウの作成

画面のアスペクト比が異なる場合を考慮したコードにします。実機デバイスの画面の解像度は MOAIEnvironment.horizontalResolution と MOAIEnvironment.verticalResolution で取得しています。

画面解像度についての Moai フォーラム
http://getmoai.com/forums/get-screen-resolution-sdk-1-2-t894/

ウィンドウを作成するコード例

-- 画面の初期化
function initialize_screen ()
   local screen_width = MOAIEnvironment.horizontalResolution or World_width
   local screen_height = MOAIEnvironment.verticalResolution or World_height
   MOAISim.openWindow ( "Zunko Castle", screen_width, screen_height )

   -- アスペクト比が異なるデバイスへの対応
   local world_aspect = World_width / World_height
   local screen_aspect = screen_width / screen_height
   local view_width, view_height
   if screen_aspect > world_aspect then
      view_height = screen_height
      view_width = world_aspect * view_height
   else
      view_width = screen_width;
      view_height = view_width / world_aspect
   end
   local view_offset_x = 0
   if view_width < screen_width then
      view_offset_x = (screen_width - view_width) / 2
   end
   local view_offset_y = 0
   if view_height < screen_height then
      view_offset_y = (screen_height - view_height) / 2
   end

   -- ビューの作成
   local viewport = MOAIViewport.new ()
   viewport:setSize ( view_width, view_height )
   viewport:setOffset ( view_offset_x, view_offset_y )
   viewport:setScale ( World_width, -World_height )
   return viewport
end

このコード中の World_width, World_height は config.lua の中で定義したものを利用しています。

デバッグメッセージの確認

追記ですが、Eclipse を使ってコードを実機で実行する場合 Eclipse の LogCat に Lua コード中に記述した print() の内容が出力されるようになっています。簡単なデバッグメッセージの確認には LogCat が便利です。
(私は Eclipse はあまり使わないので、今まで知りませんでした)

まとめ

Android の実機において Moai SDK を使ってウィンドウを表示するまでをまとめてみました。何か疑問があれば遠慮なくコメントにてお知らせ下さい。