読者です 読者をやめる 読者になる 読者になる

年の功より亀の甲

カメがプログラミングとか技術系について書くブログです。

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

ころなの原点なの

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

coronasdkってなに

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

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

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

開発を始めよう

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

https://i.gyazo.com/75969b96373ecae5e065b36543d5a000.png

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

https://i.gyazo.com/1eaf2d39bc316fd320ca0af8cf1ffb42.png

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

https://i.gyazo.com/2d27ed3f711ad4deee15520a97fa5c21.png

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

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

https://slack-imgs.com/?url=https%3A%2F%2Fi.gyazo.com%2Fafa6efdf1adc6c809caac8b0690318a6.gif&width=400&height=223


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

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

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

さて、結果はドーン

https://i.gyazo.com/3d0d566610d00b7a4e788179bdf470bc.png


感想

coronasdkでは、非常に簡単に画像の読み込みなどができるのでやる気が上がります。
また、個人的には2dゲームで十分にお腹がいっぱいなので、unityほどはいらないなーという面でもちょうどいいなという感じです。

メイン画面などは、開発状況が進んだら逐次アップします。
お楽しみにね