コロナSDKを使用したグラフィックスの操作
コロナSDKのグラフィックの作成、操作、および管理の主要コンポーネントは、表示オブジェクトです。 このオブジェクトを使用してファイルから画像を表示できるだけでなく、画像をまとめてグループ化することもできます。 これにより、一度に画面全体のグラフィックス全体を移動し、お互いの上にグラフィックスを重ねることができます。
このチュートリアルでは、表示グループを使用してプロジェクト内のグラフィカルオブジェクトを整理する基本を教えます。 これは、2つの異なるレイヤーを作成することによって実証されます.1つは通常のスクリーンを表し、もう1つはモーダルレイヤーをその上に置くことを表します。 グラフィックをレイヤー化することに加えて、モーダルグループ全体を移動するためにトランジションオブジェクトも使用します。
注： このチュートリアルに従うには、image1.pngとimage2.pngの2つのイメージが必要です。 これらの画像は任意の画像にすることができますが、約100ピクセル×100ピクセルの画像がある場合は、このチュートリアルが最適です。 これにより、画像に何が起こっているのかを簡単に確認することができます。
まず、main.luaという新しいファイルを開き、コードを作成します。
displayMain = display.newGroup（）; displayFirst = display.newGroup（）; displaySecond = display.newGroup（）; global_move_x = display.contentWidth / 5;このセクションでは、uiライブラリを設定し、displayMain、displayFirst、およびdisplaySecondという表示グループを宣言します。 これらを使用して、グラフィックスを最初にレイヤーしてから移動します。 global_move_x変数は、ディスプレイの幅の20％に設定されているので、動きを見ることができます。
関数setupScreen（）displayMain：insert（displayFirst）; displayMain：insert（displaySecond）; displayFirst：toFront（）; displaySecond：toFront（）; ローカル背景= display.newImage（ "image1.png"、0,0）; displayFirst：挿入（背景）; ローカル背景= display.newImage（ "image2.png"、0,0）; displaySecond：insert（バックグラウンド）; 終わりsetupScreen関数は、表示グループをメイン表示グループに追加する方法を示します。 また、toFront（）関数を使用して、さまざまなグラフィックレイヤーを設定します。最後に宣言されたすべてのレイヤーの上に、必要なレイヤーが表示されます。
この例では、最初にdisplayFirstを前面に移動する必要はありません。これは、デフォルトではdisplaySecondグループの下にあるためですが、各表示グループを明示的にレイヤーする習慣に入るのは良いことです。 ほとんどのプロジェクトでは、2つ以上のレイヤーが作成されます。
また、各グループに画像を追加しました。 アプリを起動すると、2番目の画像が最初の画像の上に表示されます。
関数displayLayer（）displayFirst：toFront（）; 終わりdisplayFirstグループの上に既にdisplaySecondグループのグラフィックスを重ねています。 この関数は、displayFirstを前面に移動します。
関数moveOne（）displaySecond.x = displaySecond.x + global_move_x; 終わりmoveOne関数は、2番目の画像を画面幅の20％右に移動します。 この関数を呼び出すと、displaySecondグループはdisplayFirstグループの後ろになります。
関数moveTwo（）displayMain.x = displayMain.x + global_move_x; 終わりmoveTwo関数は、両方の画像を画面幅の20％右に移動します。 ただし、各グループを個別に移動する代わりに、displayMainグループを使用して両方を同時に移動します。 これは、複数の表示グループを含む表示グループを使用して、一度に多くのグラフィックスを操作する方法の素晴らしい例です。
setupScreen（）; timer.performWithDelay（1000、screenLayer）; timer.performWithDelay（2000、moveOne）; timer.performWithDelay（3000、moveTwo）;この最後のコードは、これらの関数を実行するときに何が起こるかを示しています。 timer.performWithDelay関数を使用して、アプリケーションの起動後に1秒ごとに関数を起動します。 この関数に慣れていない場合、最初の変数はミリ秒で表される遅延時間であり、2番目の変数はその遅延後に実行する関数です。
あなたがアプリを起動すると、image1.pngの上にimage2.pngがあるはずです。 screenLayer関数が起動し、image1.pngが前面に表示されます。 moveOne関数はimage2.pngをimage1.pngの下から移動し、moveTwo関数は最後に両方の画像を同時に動かします。
これらのグループのそれぞれに数十のイメージがあることを覚えておくことは重要です。 また、moveTwo関数が両方の画像を1行のコードで移動したように、グループ内のすべての画像はグループに与えられたコマンドを受け取ります。
技術的には、displayMainグループは表示グループとその中に含まれる画像の両方を持つことができます。 しかし、displayMainのようないくつかのグループを、画像のない他のグループのコンテナとして機能させて、より良い編成を作成することをお勧めします。
このチュートリアルでは、表示オブジェクトを使用します。 表示オブジェクトの詳細をご覧ください。