コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

ステージを作成する ~勉強会資料その3~

Power Apps ゲーム開発

スポンサードリンク

このブログはPower Apps でローコーディングな勉強会 #14の資料その3になります。

このブログではステージの作成方法についてご紹介致します。

ステージを構成するデータを作成する

ステージを構成するデータはコレクションで作成します。
X×Xのマスが存在するステージを作成するときは、ギャラリーの「折り返しの数」("WrapCount")をXに設定してあげるといいです。
しかし、こちらの最大設定値は10までです。
ボンバーマンは15×15なのでこの方法は今回は使えませんね。。。
ではどうするかというと、こちらを実現するためにはギャラリーのTemplateSize = 0の手法を利用する必要があります。
こちらの手法について、@h-nagaoさんがQiitaにて解説を行っているわかれば簡単！ #PowerApps のTemplateSize=0の手法が大変わかりやすいと思いますので、是非参考にしてください！

では、ステージを構成するコレクションを作成します。
Screen1のOnVisibleにて下記のようにステージの構成を設定します。

Screen1.OnVisible

ClearCollect(stage,
{ID:1, X:0, Y:0, Width:48, Height:48, type:3},
{ID:2, X:48, Y:0, Width:48, Height:48, type:3},
{ID:3, X:96, Y:0, Width:48, Height:48, type:3},
{ID:4, X:144, Y:0, Width:48, Height:48, type:3},
{ID:5, X:192, Y:0, Width:48, Height:48, type:3},
{ID:6, X:240, Y:0, Width:48, Height:48, type:3},
{ID:7, X:288, Y:0, Width:48, Height:48, type:3},
{ID:8, X:336, Y:0, Width:48, Height:48, type:3},
{ID:9, X:384, Y:0, Width:48, Height:48, type:3},
{ID:10, X:432, Y:0, Width:48, Height:48, type:3},
{ID:11, X:480, Y:0, Width:48, Height:48, type:3},
{ID:12, X:528, Y:0, Width:48, Height:48, type:3},
{ID:13, X:576, Y:0, Width:48, Height:48, type:3},
{ID:14, X:624, Y:0, Width:48, Height:48, type:3},
{ID:15, X:672, Y:0, Width:48, Height:48, type:3},
{ID:16, X:0, Y:34, Width:48, Height:48, type:3},
{ID:17, X:48, Y:34, Width:48, Height:48, type:2},
{ID:18, X:96, Y:34, Width:48, Height:48, type:2},
{ID:19, X:144, Y:34, Width:48, Height:48, type:1},
{ID:20, X:192, Y:34, Width:48, Height:48, type:1},
{ID:21, X:240, Y:34, Width:48, Height:48, type:1},
{ID:22, X:288, Y:34, Width:48, Height:48, type:1},
{ID:23, X:336, Y:34, Width:48, Height:48, type:1},
{ID:24, X:384, Y:34, Width:48, Height:48, type:1},
{ID:25, X:432, Y:34, Width:48, Height:48, type:1},
{ID:26, X:480, Y:34, Width:48, Height:48, type:1},
{ID:27, X:528, Y:34, Width:48, Height:48, type:1},
{ID:28, X:576, Y:34, Width:48, Height:48, type:2},
{ID:29, X:624, Y:34, Width:48, Height:48, type:2},
{ID:30, X:672, Y:34, Width:48, Height:48, type:3},
{ID:31, X:0, Y:68, Width:48, Height:48, type:3},
{ID:32, X:48, Y:68, Width:48, Height:48, type:2},
{ID:33, X:96, Y:68, Width:48, Height:48, type:0},
{ID:34, X:144, Y:68, Width:48, Height:48, type:1},
{ID:35, X:192, Y:68, Width:48, Height:48, type:0},
{ID:36, X:240, Y:68, Width:48, Height:48, type:1},
{ID:37, X:288, Y:68, Width:48, Height:48, type:0},
{ID:38, X:336, Y:68, Width:48, Height:48, type:2},
{ID:39, X:384, Y:68, Width:48, Height:48, type:0},
{ID:40, X:432, Y:68, Width:48, Height:48, type:1},
{ID:41, X:480, Y:68, Width:48, Height:48, type:0},
{ID:42, X:528, Y:68, Width:48, Height:48, type:1},
{ID:43, X:576, Y:68, Width:48, Height:48, type:0},
{ID:44, X:624, Y:68, Width:48, Height:48, type:2},
{ID:45, X:672, Y:68, Width:48, Height:48, type:3},
{ID:46, X:0, Y:102, Width:48, Height:48, type:3},
{ID:47, X:48, Y:102, Width:48, Height:48, type:1},
{ID:48, X:96, Y:102, Width:48, Height:48, type:1},
{ID:49, X:144, Y:102, Width:48, Height:48, type:1},
{ID:50, X:192, Y:102, Width:48, Height:48, type:1},
{ID:51, X:240, Y:102, Width:48, Height:48, type:1},
{ID:52, X:288, Y:102, Width:48, Height:48, type:2},
{ID:53, X:336, Y:102, Width:48, Height:48, type:2},
{ID:54, X:384, Y:102, Width:48, Height:48, type:2},
{ID:55, X:432, Y:102, Width:48, Height:48, type:1},
{ID:56, X:480, Y:102, Width:48, Height:48, type:1},
{ID:57, X:528, Y:102, Width:48, Height:48, type:1},
{ID:58, X:576, Y:102, Width:48, Height:48, type:1},
{ID:59, X:624, Y:102, Width:48, Height:48, type:1},
{ID:60, X:672, Y:102, Width:48, Height:48, type:3},
{ID:61, X:0, Y:136, Width:48, Height:48, type:3},
{ID:62, X:48, Y:136, Width:48, Height:48, type:1},
{ID:63, X:96, Y:136, Width:48, Height:48, type:0},
{ID:64, X:144, Y:136, Width:48, Height:48, type:1},
{ID:65, X:192, Y:136, Width:48, Height:48, type:0},
{ID:66, X:240, Y:136, Width:48, Height:48, type:2},
{ID:67, X:288, Y:136, Width:48, Height:48, type:0},
{ID:68, X:336, Y:136, Width:48, Height:48, type:2},
{ID:69, X:384, Y:136, Width:48, Height:48, type:0},
{ID:70, X:432, Y:136, Width:48, Height:48, type:2},
{ID:71, X:480, Y:136, Width:48, Height:48, type:0},
{ID:72, X:528, Y:136, Width:48, Height:48, type:1},
{ID:73, X:576, Y:136, Width:48, Height:48, type:0},
{ID:74, X:624, Y:136, Width:48, Height:48, type:1},
{ID:75, X:672, Y:136, Width:48, Height:48, type:3},
{ID:76, X:0, Y:170, Width:48, Height:48, type:3},
{ID:77, X:48, Y:170, Width:48, Height:48, type:1},
{ID:78, X:96, Y:170, Width:48, Height:48, type:1},
{ID:79, X:144, Y:170, Width:48, Height:48, type:1},
{ID:80, X:192, Y:170, Width:48, Height:48, type:2},
{ID:81, X:240, Y:170, Width:48, Height:48, type:2},
{ID:82, X:288, Y:170, Width:48, Height:48, type:2},
{ID:83, X:336, Y:170, Width:48, Height:48, type:2},
{ID:84, X:384, Y:170, Width:48, Height:48, type:2},
{ID:85, X:432, Y:170, Width:48, Height:48, type:2},
{ID:86, X:480, Y:170, Width:48, Height:48, type:2},
{ID:87, X:528, Y:170, Width:48, Height:48, type:1},
{ID:88, X:576, Y:170, Width:48, Height:48, type:1},
{ID:89, X:624, Y:170, Width:48, Height:48, type:1},
{ID:90, X:672, Y:170, Width:48, Height:48, type:3},
{ID:91, X:0, Y:204, Width:48, Height:48, type:3},
{ID:92, X:48, Y:204, Width:48, Height:48, type:1},
{ID:93, X:96, Y:204, Width:48, Height:48, type:0},
{ID:94, X:144, Y:204, Width:48, Height:48, type:2},
{ID:95, X:192, Y:204, Width:48, Height:48, type:0},
{ID:96, X:240, Y:204, Width:48, Height:48, type:2},
{ID:97, X:288, Y:204, Width:48, Height:48, type:0},
{ID:98, X:336, Y:204, Width:48, Height:48, type:2},
{ID:99, X:384, Y:204, Width:48, Height:48, type:0},
{ID:100, X:432, Y:204, Width:48, Height:48, type:2},
{ID:101, X:480, Y:204, Width:48, Height:48, type:0},
{ID:102, X:528, Y:204, Width:48, Height:48, type:2},
{ID:103, X:576, Y:204, Width:48, Height:48, type:0},
{ID:104, X:624, Y:204, Width:48, Height:48, type:1},
{ID:105, X:672, Y:204, Width:48, Height:48, type:3},
{ID:106, X:0, Y:238, Width:48, Height:48, type:3},
{ID:107, X:48, Y:238, Width:48, Height:48, type:1},
{ID:108, X:96, Y:238, Width:48, Height:48, type:2},
{ID:109, X:144, Y:238, Width:48, Height:48, type:2},
{ID:110, X:192, Y:238, Width:48, Height:48, type:2},
{ID:111, X:240, Y:238, Width:48, Height:48, type:2},
{ID:112, X:288, Y:238, Width:48, Height:48, type:2},
{ID:113, X:336, Y:238, Width:48, Height:48, type:2},
{ID:114, X:384, Y:238, Width:48, Height:48, type:2},
{ID:115, X:432, Y:238, Width:48, Height:48, type:2},
{ID:116, X:480, Y:238, Width:48, Height:48, type:2},
{ID:117, X:528, Y:238, Width:48, Height:48, type:2},
{ID:118, X:576, Y:238, Width:48, Height:48, type:2},
{ID:119, X:624, Y:238, Width:48, Height:48, type:1},
{ID:120, X:672, Y:238, Width:48, Height:48, type:3},
{ID:121, X:0, Y:272, Width:48, Height:48, type:3},
{ID:122, X:48, Y:272, Width:48, Height:48, type:1},
{ID:123, X:96, Y:272, Width:48, Height:48, type:0},
{ID:124, X:144, Y:272, Width:48, Height:48, type:2},
{ID:125, X:192, Y:272, Width:48, Height:48, type:0},
{ID:126, X:240, Y:272, Width:48, Height:48, type:2},
{ID:127, X:288, Y:272, Width:48, Height:48, type:0},
{ID:128, X:336, Y:272, Width:48, Height:48, type:2},
{ID:129, X:384, Y:272, Width:48, Height:48, type:0},
{ID:130, X:432, Y:272, Width:48, Height:48, type:2},
{ID:131, X:480, Y:272, Width:48, Height:48, type:0},
{ID:132, X:528, Y:272, Width:48, Height:48, type:2},
{ID:133, X:576, Y:272, Width:48, Height:48, type:0},
{ID:134, X:624, Y:272, Width:48, Height:48, type:1},
{ID:135, X:672, Y:272, Width:48, Height:48, type:3},
{ID:136, X:0, Y:306, Width:48, Height:48, type:3},
{ID:137, X:48, Y:306, Width:48, Height:48, type:1},
{ID:138, X:96, Y:306, Width:48, Height:48, type:1},
{ID:139, X:144, Y:306, Width:48, Height:48, type:1},
{ID:140, X:192, Y:306, Width:48, Height:48, type:2},
{ID:141, X:240, Y:306, Width:48, Height:48, type:2},
{ID:142, X:288, Y:306, Width:48, Height:48, type:2},
{ID:143, X:336, Y:306, Width:48, Height:48, type:2},
{ID:144, X:384, Y:306, Width:48, Height:48, type:2},
{ID:145, X:432, Y:306, Width:48, Height:48, type:2},
{ID:146, X:480, Y:306, Width:48, Height:48, type:2},
{ID:147, X:528, Y:306, Width:48, Height:48, type:1},
{ID:148, X:576, Y:306, Width:48, Height:48, type:1},
{ID:149, X:624, Y:306, Width:48, Height:48, type:1},
{ID:150, X:672, Y:306, Width:48, Height:48, type:3},
{ID:151, X:0, Y:340, Width:48, Height:48, type:3},
{ID:152, X:48, Y:340, Width:48, Height:48, type:1},
{ID:153, X:96, Y:340, Width:48, Height:48, type:0},
{ID:154, X:144, Y:340, Width:48, Height:48, type:1},
{ID:155, X:192, Y:340, Width:48, Height:48, type:0},
{ID:156, X:240, Y:340, Width:48, Height:48, type:2},
{ID:157, X:288, Y:340, Width:48, Height:48, type:0},
{ID:158, X:336, Y:340, Width:48, Height:48, type:2},
{ID:159, X:384, Y:340, Width:48, Height:48, type:0},
{ID:160, X:432, Y:340, Width:48, Height:48, type:2},
{ID:161, X:480, Y:340, Width:48, Height:48, type:0},
{ID:162, X:528, Y:340, Width:48, Height:48, type:1},
{ID:163, X:576, Y:340, Width:48, Height:48, type:0},
{ID:164, X:624, Y:340, Width:48, Height:48, type:1},
{ID:165, X:672, Y:340, Width:48, Height:48, type:3},
{ID:166, X:0, Y:374, Width:48, Height:48, type:3},
{ID:167, X:48, Y:374, Width:48, Height:48, type:1},
{ID:168, X:96, Y:374, Width:48, Height:48, type:1},
{ID:169, X:144, Y:374, Width:48, Height:48, type:1},
{ID:170, X:192, Y:374, Width:48, Height:48, type:1},
{ID:171, X:240, Y:374, Width:48, Height:48, type:1},
{ID:172, X:288, Y:374, Width:48, Height:48, type:2},
{ID:173, X:336, Y:374, Width:48, Height:48, type:2},
{ID:174, X:384, Y:374, Width:48, Height:48, type:2},
{ID:175, X:432, Y:374, Width:48, Height:48, type:1},
{ID:176, X:480, Y:374, Width:48, Height:48, type:1},
{ID:177, X:528, Y:374, Width:48, Height:48, type:1},
{ID:178, X:576, Y:374, Width:48, Height:48, type:1},
{ID:179, X:624, Y:374, Width:48, Height:48, type:1},
{ID:180, X:672, Y:374, Width:48, Height:48, type:3},
{ID:181, X:0, Y:408, Width:48, Height:48, type:3},
{ID:182, X:48, Y:408, Width:48, Height:48, type:2},
{ID:183, X:96, Y:408, Width:48, Height:48, type:0},
{ID:184, X:144, Y:408, Width:48, Height:48, type:1},
{ID:185, X:192, Y:408, Width:48, Height:48, type:0},
{ID:186, X:240, Y:408, Width:48, Height:48, type:1},
{ID:187, X:288, Y:408, Width:48, Height:48, type:0},
{ID:188, X:336, Y:408, Width:48, Height:48, type:2},
{ID:189, X:384, Y:408, Width:48, Height:48, type:0},
{ID:190, X:432, Y:408, Width:48, Height:48, type:1},
{ID:191, X:480, Y:408, Width:48, Height:48, type:0},
{ID:192, X:528, Y:408, Width:48, Height:48, type:1},
{ID:193, X:576, Y:408, Width:48, Height:48, type:0},
{ID:194, X:624, Y:408, Width:48, Height:48, type:2},
{ID:195, X:672, Y:408, Width:48, Height:48, type:3},
{ID:196, X:0, Y:442, Width:48, Height:48, type:3},
{ID:197, X:48, Y:442, Width:48, Height:48, type:2},
{ID:198, X:96, Y:442, Width:48, Height:48, type:2},
{ID:199, X:144, Y:442, Width:48, Height:48, type:1},
{ID:200, X:192, Y:442, Width:48, Height:48, type:1},
{ID:201, X:240, Y:442, Width:48, Height:48, type:1},
{ID:202, X:288, Y:442, Width:48, Height:48, type:1},
{ID:203, X:336, Y:442, Width:48, Height:48, type:1},
{ID:204, X:384, Y:442, Width:48, Height:48, type:1},
{ID:205, X:432, Y:442, Width:48, Height:48, type:1},
{ID:206, X:480, Y:442, Width:48, Height:48, type:1},
{ID:207, X:528, Y:442, Width:48, Height:48, type:1},
{ID:208, X:576, Y:442, Width:48, Height:48, type:2},
{ID:209, X:624, Y:442, Width:48, Height:48, type:2},
{ID:210, X:672, Y:442, Width:48, Height:48, type:3},
{ID:211, X:0, Y:476, Width:48, Height:48, type:3},
{ID:212, X:48, Y:476, Width:48, Height:48, type:3},
{ID:213, X:96, Y:476, Width:48, Height:48, type:3},
{ID:214, X:144, Y:476, Width:48, Height:48, type:3},
{ID:215, X:192, Y:476, Width:48, Height:48, type:3},
{ID:216, X:240, Y:476, Width:48, Height:48, type:3},
{ID:217, X:288, Y:476, Width:48, Height:48, type:3},
{ID:218, X:336, Y:476, Width:48, Height:48, type:3},
{ID:219, X:384, Y:476, Width:48, Height:48, type:3},
{ID:220, X:432, Y:476, Width:48, Height:48, type:3},
{ID:221, X:480, Y:476, Width:48, Height:48, type:3},
{ID:222, X:528, Y:476, Width:48, Height:48, type:3},
{ID:223, X:576, Y:476, Width:48, Height:48, type:3},
{ID:224, X:624, Y:476, Width:48, Height:48, type:3},
{ID:225, X:672, Y:476, Width:48, Height:48, type:3}
);

それぞれの要素について簡単に説明したいと思います。

要素 解説
ID ステージの通し番号になります。
後に使用します。
X 対象のイメージのX座標の値になります。
Y 対象のイメージのY座標の値になります。
Width 対象のイメージの幅になります。
Height 対象のイメージの高さになります。
type 対象のイメージの表示される画像になります。


ここでtypeに対応したステージの素材イメージは下記とします。

type イメージ
0 ステージ内にある破壊不能ブロック
1 ブロック
2 床
3 ステージ外にある破壊不能ブロック

キャンバスにステージを表示する

「挿入」>「ギャラリー」>「縦方向(空)」を選択します。
Itemsには先ほど作成したコレクションを選択します。

Gallery1.Items

stage

また、こちらのギャラリーの名前はわかりやすいように"StageGallery"としておきましょう。

続いてギャラリー内に「メディア」>「画像」より画像を追加してください。
こちらに表示する画像はコレクションのタイプにより設定されたイメージとします。
よって、Image1のImageには下記のように設定します。

Image1.Image

Switch(ThisItem.type,
0, 壁,
1, ブロック,
2, 床1,
3, 外周
)

これで画像が表示されましたが、ステージっぽくないですね。

次に、画像が指定した座標に表示されるように設定したいと思います。

まずはギャラリーの設定を変更していきます。
StageGalleryを選択してそれぞれ下記のように設定します。

StageGallery.TemplateSize

0

StageGallery.TemplatePadding

0


次にギャラリー内にある画像の設定を変更していきます。
Image1を選択してそれぞれ下記のように設定していきます。

Image1.X

ThisItem.X

Image1.Y

Mod(15 - ThisItem.ID, 15) + ThisItem.Y

Image1.Width

ThisItem.Width

Image1.Height

ThisItem.Height

Yについてのみ、設定してある数値をそのまま使用していませんが、これはギャラリーのTemplateSizeを0に設定しても、0にはならず1になってしまうためです。
そのため、補正のためにこのような式となっております。
あとはギャラリー内の画像が見切れない程度に適当にギャラリーの大きさを設定してください。

これでステージの設定ができました！


スポンサードリンク