スクラッチでポケポケの作り方

今回つくるゲーム

難易度

今回はいま大人気のポケポケをスクラッチで作っていきます。今回作る部分はパックを選択して、開封するところまでです。切り取り線をなぞってパックを開封する部分や、出るカードの確立の設定などができるようにしています。さらに、パック選択の部分では円にならんだパックをスワイプで選べる演出についても解説します。パック選択の部分はかなり難しいので、それ以外の部分を先に作り、よりクオリティを上げたい人は上級編としてパック選択部分に挑戦できるようにします。

この記事でも順番に作り方を解説しますがくわしくははYouTube動画で確認してください。

まずはゲームをプレイしてみましょう。

youtube解説

こちらの動画ではわかりやすくゲームの作り方を解説しています。実際に作るときはこの動画を見ながら作ることをお勧めします。チャンネル登録もよろしくお願いします！

[スクラッチ]ポケポケの作り方①

パックのコスチュームをつくる

まずはパックのコスチュームから作っていきます。以下のようにパックのコスチュームを作ります。幅150、高さ260くらいで作りますが、そのときに、上部と下部を分けれるように作ります。

おもて以外に、”うら”と”下だけ”の二つのコスチュームを作ります。
※”下だけ”のコスチュームを作るときは、上部を消して、そのままにしておいてください。全体を中央にもってきてしまうとこのあとうまくいきません。

次に、このパックのスプライトを複製し、以下のように上部のみのコスチュームのスプライトを作ります。このときも先ほど同様、下部分を削除するだけで、中央に持ってこないように注意してください。

そうすると、パックのコスチュームを「下だけ」にして、両方のスプライトの位置を0:0にすると以下のように合体してパックになります。

パックと上部のコード

コードを書いていきます。

パックのコード

次にパックのコードを書いていきます。以下のように書きましょう。

上部のコード

続いて上部のコードです。

これでパックをクリックすると拡大しますが、そのときには下部と上部でわかれるようになっているというからくりとなっています。

切り取り線をつくる

つぎに拡大した時の切り取り線をつくっていきます。以下のように、上部と下部のあいだにちょうどおさまるように切り取り線のコスチュームを作ります。幅は15にしておいてください。これをクローンで横に並べていくことで、切り取り線を作ります。

コスチュームが描けたら、以下のようにコードを書きます。以下のようにコードを書くと切り取り線が描かれ、マウスでなぞると左側から赤色になっていきます。

たとえば、左から10個目までをなぞった状態が以下になります。

なぞりのリストが15まですべて1になったら開封ということですね。

開封する

では開封できるようにしていきましょう。開封すると上部がとんでいくイメージです。上部のスプライトに移動して以下のようにコードを書きます。

開封されたときに、切り取り線は削除する必要があるので、「切り取り線」のスプライトに以下のようにコードを追加します。

そして、開封されるとパックは消えて、カードが出てきます。パックのスプライトに移動して以下のコードを追加します。

カードを出す

ではカードを出していきましょう。”ポケカ”という新しいスプライトを作り、以下のようにカードを作っていきます。今回は10種類のカードを作りました

今回は以下のようにレア度と出現確率を決めたいと思います。

★　　　　　　　　　出現率60%
カニカニマン
はりはり
ぴよぴよ
金魚ばちにいる金魚
★★　　　　　　　　出現率30%
フォクスライ
スパイダー
アヒルちゃん
★★★★                  出現率9%
ネコキング               
ペガサス2
★★★★★★            出現率1%
メガドラゴン

コードは以下の通りとなります。これで５枚のカードを上記の確率で出現させることができます。

最後に、５枚全部めくったらカードを並べるようにします。以下のコードを追加して完成です

（難）スワイプでパックを選択できるようにする

ここまででもポケポケのパック開封ができましたが、スワイプでパックを選ぶ演出をここから説明します。これは考え方もコードもかなり難しいです。

考え方

まずは、考え方です。以下のように10枚のカードが円に並んでいて、それを正面から見ていることをイメージしてください。手前にあるカードは大きく見えて後ろの方にあるカードは小さく、ぼやけて見えるはずですね。

つぎに、この円を360個に分けて番号をつけていきます。正面の番号を1として、反時計回りに1度ごとに2,3,4,5・・・と番号をふっていきます。正面にあるカードは右にスワイプすると2,3,4,5・・、左にスワイプすると359,358,357,・・・と場所を移動していくことになります。

では、それぞれの番号の場所で横方向と奥行きはどのように定義できるかを考えます。
まずは、横方向です。今回円の半径は240としたときに、それぞれの番号での横方向の場所は
240×sin(番号)
というように定義できます。これは高校生でならう数学です

次に奥行きを考えます。奥行きは以下のように
240×(1-cos(番号))
となります。奥に行けば行くほど大きさが小さくなるので、今回は任意の番号の大きさは
60-20×(1-cos(番号))
と定義します。

コードを書く

ではこれをもとにコードを書いていきます。順を追って説明すると長くなってしまうので、詳しく理解したい人は動画をみてください。

パックのコード

パックのコードは以下のように書き換えます。「リング_x座標」と「リング_大きさ」というリストを作り、それぞれの番号の場所でx座標と大きさがどうなるかをリストに書いておきます。
そしてクローンで10個のパックをつくり、円の上に均等に配置します。そして場所によって最背面にいったり、１つ奥にしたり、幽霊の効果でうすくしたりします。回転数についてはこのあとのスワイプのスプライトでコントロールしていきます。クローンを使うので拡大したときにクローンは削除しておきましょう。