coronasdkでゲームかアプリ開発にチャレンジ【ころなとサリー AdventCalendar 2015/12/17】

ころなの原点なの

こんにちは、ころなだよ。
今回は、corona_riverのcoronaに決めたときに遊んでいたcoronasdkでゲームかアプリを開発していくよ。
(;・∀・)

coronasdkってなに

coronaとはluaで書いて、スマホのアプリを作成することができるクロスプラットフォームの開発環境です。
luaで作成していくため、flashの方々が比較的とっつきやすかったりするのが特徴になります。

coronasdkとシミュレーターについては、下記のurlからダウンロードすることができます。
coronalabs.com

また、クラウド上にビルドする環境があるため、ローカルにandroidやiosのビルド環境がなくても開発していくことが可能だよ。

開発を始めよう

それでは、coronasdkでの開発を始めていくよ。(/・ω・)/
coronasdkのインストール自体は省略して、CoronaSimulatorを起動したところから始めます。

新規でゲームを作る時は「NEW PROJECT」をクリックするよ。

そうすると、Projectの設定用ダイアログが表示されます。
今回は、ゲームっぽく複数のシーンを利用するゲームをタブレットじゃない端末で動かすので
MultiSceneApplicationを選択して、OKボタンを押します。

OKを押すと、既に複数シーンが立ち上がっているアプリと各種アイコンが作成されちゃいました。
(/・ω・)/

画面ごとの役割を決めるよ。

それじゃあ、サンプルでシーンが3つできているので、それぞれの役割を決めるよ。
今回作るのは、「過去のadventcalendarで作ったblendarの画像を表示して、クリックと反応する」というところまでだょ。
blendarのadventcalendarで利用するモデルはサリーさんのだから、クレジット画面も追加してみるよ。

というわけで、下記のような画面構成でいくよ。(=ﾟωﾟ)ﾉ

Scene1

タイトルっぽい何か

Scene2

実際にblendarの画像をクリックできる何か

Scene3

クレジット画面

タイトル画面を作り始めるよ。

それじゃあ、タイトル画面を作るよ。
タイトル画面の仕様はこんな感じだよ。

押した時のアクション
・画面をタップしたら、メイン画面に遷移する

画面
・画面を押してねという画像を表示する

デザインをこらなければ、超単純だね！？

ボタンをタッチから、画面タッチに変更してみよう(=ﾟωﾟ)ﾉ

それじゃあ、サンプル画面と比べて動きが違う画面をタッチしたら遷移するという部分の作成をしていくよ。

タッチの時には、画面全体に対してタッチイベントを追加するという形式にしました。

Runtime:addEventListener( "touch", nextScene )

画面を遷移する時はフェード処理を入れたいので下記のように設定するよ。

function nextScene(event)
	composer.gotoScene( "scene2", { effect = "fade", time = 300 } )
end

ボタンじゃなくて、画面をタッチすることで次にシーンに進むことが確認できたよ。

次は、次にタイトルのロゴ画像を作ります。
今回は、blendarのモデルをタッチするということで「かめタッチ」というタイトルで作っていきます。

画像を表示するのは３行で下記のようになりますです。

local TitleImg = display.newImage("kame_touch_title_logo.png")
TitleImg.x = dspW / 2
TitleImg.y = 100

背景は32*32の画像をタイルのように敷き詰めて表示するようにしています。

for j = 1, (dspH / 32) + 1, 1 do
	backgroundTile[j] = {}
	for i = 1, (dspW / 32) + 1, 1 do
		backgroundTile[j][i] = display.newImage("kame_touch_title_back.png")
		backgroundTile[j][i].x = (i - 1) * 32
		backgroundTile[j][i].y = (j - 1) * 32
	end
end