画像を表示するにはイメージ部品を使うわけですが、他のプログラム言語の例を見ると「ダブルバッファリング」と「キャッシュ」を使うのがよさそうです。
これをなでしこで書いてみます。
プレイヤーに見せる「表イメージ」。
同じサイズの裏イメージ。
同じサイズのレイヤーを数枚(ここでは0～2の3枚)。
キャッシュという無駄に大きなイメージを用意します。
透過色については後で説明します。
!変数宣言は必要
!レイヤー枚数=3
!画面サイズ=「0,0,600,400」
!透過色=0
黒色=$000001
//-------------部品の宣言ここから----------
表イメージとはイメージ
そのサイズは画面サイズ
裏イメージとはイメージ
そのサイズは画面サイズ
その可視はオフ
裏イメージを画面クリア
レイヤーとは配列
(レイヤー枚数)回
レイヤー[回数-1]をイメージとして作成
レイヤー[回数-1]→サイズは画面サイズ
レイヤー[回数-1]→可視はオフ
レイヤー[回数-1]を透過色で画面クリア
キャッシュとはイメージ
そのW=1000
そのH=5000//適当に大きく
その可視はオフ
キャッシュを透過色で画面クリア
//-------------部品の宣言ここまで----------
次は転送部分です。
プログラムからはレイヤー[0]～レイヤー[2]に描画します。
その後、●描画転送
でレイヤーを順番に裏イメージに画像合成します。
レイヤーを合成してできた裏イメージを表イメージに画像コピーしてプレイヤーに見せます。
その後レイヤーと裏イメージを画面クリアし、次の描画に備えます。
これゲームループに組み込んで毎フレーム呼びます。
//毎フレーム呼ぶ
●描画転送
(レイヤー枚数)回
レイヤー[回数-1]の0,0へ透過色を点描画//左上が透過色
レイヤー[回数-1]を裏イメージの0,0へ画像合成
裏イメージを表イメージの,0,0へ画像コピー//上書き
裏イメージを画面クリア
(レイヤー枚数)回
レイヤー[回数-1]を透過色で画面クリア
//キャラをレイヤーに描画する
●テスト
x1とは変数。x2とは変数。y1とは変数。y2とは変数。
線太さは1。線色は黒色
3回
回数で条件分岐
1ならば、塗色は赤色
2ならば、塗色は青色
3ならば、塗色は緑色
x1=乱数(50)
x2=x1+50
y1=0
y2=50
レイヤー[回数-1]のx1,y1からx2,y2へ円
//ゲームループ
1でループ
テスト
描画転送
0.2秒待つ
レイヤーについて
レイヤー[0]が一番奥に描画され、レイヤー[1]、レイヤー[2]に画像合成で上書きされます。
レイヤー[0]に背景を、レイヤー[1]にキャラを、レイヤー[2]にポップアップ説明などを入れるといいんじゃないでしょうか。
例ではレイヤーに直接描画していますが、キャラなどはキャッシュから「画像部分コピー」してくるのがいいでしょう。 もちろんキャッシュには画像をあらかじめ読み込みしておきます。
透過色と黒色について
画像合成の命令の説明を読むと「左上の色を透過色として扱う」とありますが、罠があります。(なでしこver1.572時点)
透過色を0(黒)以外にすると合成後に変な色になります。
!透過色=0
と黒色=1
としているのは0を透過色として、もともと0が黒だったのを似た色(=1)に置き換えています。
また、素材画像を作ってもらうときは「透過色は0でお願いします」と添えておくとよいと思います。
その他補足事項
左上の点に透過色以外が来た時のことも考えなくてはなりません。
上の例では左上に点描画してごまかしています。
画像マスクを使った例がサンプルにありますが、それも透過色が0じゃないと変な色になるので気を付けましょう。
サンプルにきちんと手を加えればどんな透過色でも大丈夫になります。
画像合成のほうが処理が早いので、無理に画像マスクを使うよりいいとおもいます。
