Corona‎ > ‎Docs‎ > ‎

Corona in 5 minutes

↑の和訳とかしてみたページ。

手早くCoronaSDKを紹介しましょう。細かい部分は省いて、重要な点のみに注目していきます。完全さ、綿密さは求めません。それよりも、カッコ良くて、使いやすくて、魅力的なアプリを作るためのポイントをできるだけ早く抑えてほしいのです。

本記事では基礎として変数や関数について取扱いますが、どんなことができるかを何となくでも掴んでもらうために、アニメーションやインタラクティブな動作についても触れています。なお、本記事はチュートリアルですので、どの機能についても完璧な説明を得られないことについて留意しておいてください。

私たちの目的は、複数の読者を相手にできることです。経験豊富なプログラマーであればこの記事の情報から想像を膨らませ、自分のニーズを満たすことができるでしょう。初心者であればこの記事を、シンプルで小さなアプリを初めて書くための出発点にすることができるでしょう。

チュートリアル用のファイルは以下からダウンロードできます。
HelloWorldTutorial.zip

HelloWorld

Corona SDKの使い方を覚えるための一番の(そして唯一の)方法は実際にアプリを書いてみることです。Luaという言語でプログラムを書きます。慣例に従って、まずは「Hello World」を表示するプログラムを書いてみましょう。
まず目の前に立ち塞がる課題は、実際のCorona SDKの使い方を詳細に理解する、ということです。一度使い方をしっかりとマスターしてしまえば、その後の作業はグッと楽になるはずです。

さあ、始めましょう。まずはプログラムを書くためのエディタが必要ですね。あとでそのファイルをどこかのフォルダに入れて、Corona Simulatorで実行したり結果を見たりすることになるでしょう。

テキストエディタに次のコードを入力してください。

print("Hello World")

このファイルにmain.luaという名前をつけて、置きやすいフォルダに保存してください。一般的には、プログラムごとに専用のフォルダを用意します。

このプログラムを実行するには、まずCorona Simulatorを起動します。Corona SDK関連のファイルは全て/Application/Coronaに入っています。(Corona SDKのインストール方法についてはGetting Started Guideを参照してください)

SDKの中身は上の画像のようになっているはずです。Corona Terminalのアイコン(丸で囲まれています)をダブルクリックしましょう。
(※訳註:Macのターミナル.appの設定で、文字コードが日本語(MacOSX)になっていると起動できませんでした。UTF-8なら問題有りません。)

ターミナルとCorona Simulatorが立ち上がったら、メニューバーのFile→Open...から、先程作ったmain.luaを開いてください。
ここで、ターミナルでは以下のように「Hello World」の文字が見られるはずです。

また、右側の画像のように、実際の電話機のような形をしたシミュレータが何も表示されない状態で現れていると思います。この場合は、画面には何も表示されないままです。これは、プログラムに「ターミナルに出力する命令」だけを書いたからです。

プログラム内で何が起きているか説明します。アプリはmain.luaというファイルから実行されます。シミュレータはこのコードを読み込み、中に書いてある命令を解析します。一般的に、アプリのコードは変数でできています。式には各種の命令を記述し、変数には各種の値を保持します。

先程のプログラムではprintという関数を使いました。関数は式の集まりで、複数の命令を処理できます。関数には値を入力することができ、この値のことをパラメータもしくは引数などと呼びます。関数は値を返す場合もあります。print関数の場合は全ての引数を文字列としてターミナルに出力しています。

Simulator vs Terminal

何故「Hello World」はターミナルだけに出力し、シミュレータに出力しなかったのでしょうか。それは、print関数がターミナルへの出力を行うためにできているからです。これは私たちが「プログラム内で何が起こっているのか」を知り、診断する際にアウトプットの手段として使えます。そして一般的に、ターミナルはシミュレータが出力・生成する警告やエラーのメッセージを見るための用途によく使われます。

Hello World on the Simulator

シミュレータの画面に何か表示するには、Coronaのグラフィクスライブラリが提供する関数を使う必要があります。ライブラリとは便利さと機能性をユーザーへ提供する関数の集まりです。「Hello World」をシミュレータ内で表示するには、以下の2行を記述してください。

local textObject = display.newText( "Hello World!", 50, 50, native.systemFont, 24 )
textObject:setTextColor( 255,255,255 )

何が起こっているのか説明します。newTextdisplayライブラリの関数で、画面にテキストを表示させるオブジェクトを返します。
ライブラリの関数については、まだ説明が必要でしょう。この例で、newTextdisplayライブラリに含まれるということは分かったと思います。この関係性はプロパティ関係として知られています。displaynewTextプロパティにアクセスするには、ドットを使います。つまり「display.newText」と記述することになり、「newText」単体で記述することはできないということです。

setTextColor関数は、オブジェクトメソッドと呼ばれる特殊なメソッドです。コロンを用いた構文は、先程作成したテキストオブジェクトに関連する関数であることを意味しています。特徴的な点として、この種のメソッドは、コロンの前に指定された変数(例:textObject)に変更を加えます。今回の例ではテキストオブジェクトに赤緑青(RGB)の色チャンネルを加えています。それぞれの値は0から255までの数値で指定します。つまり、白を指定するにはRGBをそれぞれ255にすればよいわけです。

Rapid Prototyping

Corona SDKが持つ最も強力な特徴の1つに、素早い変更を行ってそれを確認するのが容易であることが挙げられます。
先程の成果物をもう一度使います。ダウンロードしてもらったサンプルコードの「Hello World」プロジェクトを利用してもらっても構いません。これまでと同じように、シミュレータを立ち上げてプログラムを開いてください。

さて、main.luaファイルをエディタで開いたら、setTextColorの引数を変更してください。以下は一例です。

local textObject = display.newText( "Hello World!"5050, native.systemFont, 24 )
textObject:setTextColor( 255,0,0 )

引数の変更が終わったら、ファイルを保存し、シミュレータに戻ってください。FileメニューからRelaunchを選択します。ショートカットキーの⌘R(command-R)を利用しても構いません(訳註:WindowsではCtrl-R)。これにより、シミュレータを再起動することなくmain.luaを再度読み込むことができます。テキストの色が即座に変わったことに注目してください。上記の例でコードを変更していたら、テキストの色は赤くなったはずです。

アプリを開発する上で、こういった作業は非常に多く発生するはずです。シミュレータにアプリを読み込み、main.luaを少し編集して、シミュレータに戻ってRelaunchして、コードの動作を確認する。こうして編集と動作確認をとても簡単に行うことができるおかげで、従来のように、シミュレータの終了と再起動によってトラブルが起きたり時間を浪費したりする状況を回避できるのです。

Basic Interactivity

さて、今度はテキストの色をランダムに変えることができるボタンを作って、アプリにインタラクティビティ(双方向性)を加えてみましょう。まずはこれまで作ってきた「Hello World」プロジェクトのmain.luaに、画像をロードするためのコードを追加します。

local button = display.newImage( "button.png" )
button.x = display.contentWidth / 2
button.y = display.contentHeight - 50

(訳註:事前にサンプルフォルダからbutton.pngをコピーし、main.luaと同じフォルダーに置いてください。)

このコードはbutton.pngという名前の画像を読み込み、画面下部の中央に配置する命令を表しています。先程までとはまた別のdisplayライブラリの関数(display.newImage)を使っていますね。この関数は画像オブジェクトを返し、button変数に格納しています。変数にはどんな名前を付けても構わないことになっていますが、ボタンの形をした画像はbuttonという名前の変数に入れるのが自然で分かりやすいでしょう。

画像オブジェクトは自身に変更を加えるためのプロパティを初めから持っています。その中には、画面の上端・左端から画像の中央までの距離を指定するx, yといったプロパティも含まれています。

画面の下端の座標を得るためには、displayのプロパティを上手く使います。display.contentWidthdisplay.contentHeightによって、ボタンを画面下部の中央へと導くことができるはずです。

ただの画像をボタンにするためには、イベントに反応するような仕組みを作る必要があります。イベントには幾つかの種類がありますが、今回の例では画像が「タップ(tap)」イベント(パソコンでいうクリック)に対応するようにします。以下のコードをmain.luaに追加すれば、ボタン画像をタップすることで文字の色が変わるようになるはずです。

function button:tap( event )
        local r = math.random( 0, 255 )
        local g = math.random( 0, 255 )
        local b = math.random( 0, 255 )
 
        textObject:setTextColor( r, g, b )
end
 
button:addEventListener( "tap", button )

それでは、どのように動作が実現されているのか見ていきましょう。上記のコードは2つの部分に分かれています。1つ目は画像オブジェクト変数・buttonに対するオブジェクトリスナーを定義しています。オブジェクトリスナー(テーブルリスナーと呼ばれることも多いです)は、対象とするイベントの名前と同名のオブジェクトメソッドです。オブジェクトリスナーはとある作法に従って記述するオブジェクトメソッドであるとも言えます。今回の例ではメソッド名は「tap」になるわけです。また、オブジェクトメソッドを記述しているので、この定義にはコロンが現れています。

2つ目は、オブジェクトリスナーが「tap」イベントを受け取れるように登録する部分です。ありがたいことに、画像オブジェクトであるbuttonは(displayライブラリから作られた各オブジェクトのように)初めからオブジェクトメソッドを持っており、そのうちの一つであるaddEventListenerを用いることでインタラクティブな動作を定義できます。このメソッドはオブジェクトメソッドですので、画像オブジェクト変数であるbuttonはコロンの左側へ、addEventListenerは右側へ書くことになります。第1引数はイベントの名前、第2引数は画像オブジェクト自身になります。

ユーザーが画像をタップすると、システムは登録されたオブジェクトリスナーを見に行きます。オブジェクトの中にtapというオブジェクトメソッドが見つかれば、そのメソッドを呼び出します。先程実装したtapオブジェクトメソッドでは、0から255までの乱数を3つ生成し、それぞれをテキストの新しい色パラメータに利用しています。

最終的なコードはサンプルの「HelloWorld2」フォルダに入っています。

Animation and Sound

それでは次は、テキストを動かしてみたり、ボタンをタップするたびに音が出るようにしてみましょう。HelloWorld2プロジェクトを元にして進めていきます。まずはmain.luaの末尾に以下のようなコードを加えましょう。テキストオブジェクトを縦方向に100ピクセル下げる命令です。

transition.to( textObject, { time=1000, y=textObject.y+100 } )

ここで使ったtransitionライブラリは、私たちに代わって面倒な処理を引き受けてくれる強い味方です。(詳しくはAnimationを見てください)

音を出すようにするには、tapオブジェクトメソッドに1行足すだけです

function button:tap( event )
        local r = math.random( 0, 255 )
        local g = math.random( 0, 255 )
        local b = math.random( 0, 255 )
 
        textObject:setTextColor( r, g, b )
        media.playEventSound( "beep.caf" )
end
 
button:addEventListener( "tap", button )

(訳註:事前にサンプルフォルダからbeep.cafをコピーし、main.luaと同じフォルダーに置いてください。)

マルチメディア系の動作をサポートしているmediaライブラリを利用しました。

You're All Set

これでCoronaのクイックツアーはおしまいですが、もっと色んなことを探求してみてください。例えば奇抜なユーザー操作を実現するために加速度センサーを使ってみたり、位置を使った機能を取り入れるためにGPS情報を取得したり、データベースにデータを保存したり。まだまだ色々あります。

願わくば、あなたがこのチュートリアルを通して、Coronaが如何にクールなアプリやゲームを作る上で手軽な手段かということで味を占めてくれていればと思います。もしもっと学びたいことがあれば、Overviewのページへ進み、情報を得てください。

また、もし書籍によって知識を深めたい場合は、Lua書籍のリストがありますので、オンラインや近所の書店から購入してください。
(訳註:和書でLuaを学ぶ場合は、プログラミング言語Lua公式解説書がオススメです)

更新履歴

2011/04/10 作成
2011/05/11 公式解説書へのリンクを追加
Comments