- スターター作品
- なし
- 今回の完成サンプル
- なし
スタータープロジェクトをリミックスしよう
今回はコスチュームなど多くが含まれたスタータープロジェクトがあるのでリミックスしておいてね。
ペンの拡張機能を追加する
画面右下のボタンをクリックしてペンを追加しよう。
![](https://scratch.coach/wp-content/uploads/2024/04/6cfd684ea2ecdd074f587ea2a87377bd.png)
![](https://scratch.coach/wp-content/uploads/2024/04/3fcb700600d02ddf376309ec79046ddc.png)
サムネを開発用の背景に変えておく
![](https://scratch.coach/wp-content/uploads/2024/04/878e3def73a260de78733301640cb487.png)
![](https://scratch.coach/wp-content/uploads/2024/04/85f2d6fe917d89e8c1db16945334a1d8.png)
スタンプで玉が動く仕組みを作る
スプライト「メイン」を開こう。
![](https://scratch.coach/wp-content/uploads/2024/04/69eeb6d59b3af7315f0f1806eca38092.png)
ワンステップずつスクショをとってあるから、画像を見て一緒にブロックを置いていこう。
![](https://scratch.coach/wp-content/uploads/2024/04/043e905a5184abe8ea13eb49a83f8c08.png)
![](https://scratch.coach/wp-content/uploads/2024/04/a2881bd460833c85dd8d397c6c973343.png)
リスト「玉一覧」を作る
![](https://scratch.coach/wp-content/uploads/2024/04/b506b11f390568ec4f7b7c4ca44fea1c-1.png)
![](https://scratch.coach/wp-content/uploads/2024/04/4a9ffe38a2eee11cef27e4b903c053ee.png)
玉のデータは6個のデータで成り立つ
リストを使うのだけど、普通の使い方とは少し違う。1から6までの6個のデータで1つの玉を表現していこうと思う。
![](https://scratch.coach/wp-content/uploads/2024/04/a51bf393905762eeb655b948aeced2b8-1024x831.png)
2つ目の玉は7から13までの6個のデータを使うといった具合だよ。
よし、引き続きブロックを置いていこう。
![](https://scratch.coach/wp-content/uploads/2024/04/e7747b467dc1af73ef376a3a77f3d862.png)
ペンのブロックを使うよ。
![](https://scratch.coach/wp-content/uploads/2024/04/0aed32e055d17e99d1a0cd9e2b034e0b.png)
![](https://scratch.coach/wp-content/uploads/2024/04/646bab4398c7c624d2a1cbf7dff3be5c.png)
![](https://scratch.coach/wp-content/uploads/2024/04/6bd1f7485cdb92eca20d1333ba383a9e.png)
リストを割り当てる。
![](https://scratch.coach/wp-content/uploads/2024/04/d1e7c24a1984363fec541961f3444190-1024x121.png)
定義「_玉を追加する」を作る
引数は3つあるから注意。再描画せずに実行するにチェックをつけよう。
![](https://scratch.coach/wp-content/uploads/2024/04/13a4287054a8c86ac27ef4f882855980-1024x771.png)
リスト「玉一覧」にデータを追加するブロックを6個置いてね。
![](https://scratch.coach/wp-content/uploads/2024/04/0a9ec4cc9fbeb9f9e7a3ef47bf1f3ae8.png)
とりあえず最初の2つに引数のXとYを入れよう。
![](https://scratch.coach/wp-content/uploads/2024/04/f8f4cc6aa3e2c3e9f526c97859b259c4.png)
緑の旗が押されたときに実行されるようにしよう。ずっとループの直前がいいよ。引数は適当でOK。
![](https://scratch.coach/wp-content/uploads/2024/04/72958ee81b5e762d488a9d3fce225acb.png)
定義「_玉を描画する」を作る
引数はないよ。画面を再描画せずに実行するよ。
![](https://scratch.coach/wp-content/uploads/2024/04/756ca91aa1536bf2c265756dcd5032ff-1024x765.png)
変数「現在の玉」を作る
![](https://scratch.coach/wp-content/uploads/2024/04/7610717d687254dce1fe4827565f8806-963x1024.png)
初期化していこう。
![](https://scratch.coach/wp-content/uploads/2024/04/9d9673681edd26201b5b8e9cc54a19e6.png)
ループブロックを置く。
![](https://scratch.coach/wp-content/uploads/2024/04/460aab9559525ff725e8ca1acf728aff.png)
この中で使う演算を作ろう。
![](https://scratch.coach/wp-content/uploads/2024/04/17f02656aaaeba17e19525c185b14918.png)
これで玉の数だけループされるようになるよ。リストの中身が6個だけなら玉は1つ。中身が48個なら玉は8個というふうに計算できる。
![](https://scratch.coach/wp-content/uploads/2024/04/65284e34a7a79eadf5629bfa3ae36913.png)
このループの中には、「緑の旗が押されたとき」に使ってた↓このブロックを移動してきて。元の場所からは消してOKだよ。
![](https://scratch.coach/wp-content/uploads/2024/04/0e396f2e2297f05bff644c700b82194d-1024x287.png)
ループの最後で変数「現在の玉」に6加算する。
![](https://scratch.coach/wp-content/uploads/2024/04/1f0af8eb348f4a33ab393993678ffa5d.png)
元の場所には、この定義を実行するブロックを置いておこう。
![](https://scratch.coach/wp-content/uploads/2024/04/4cb92388e46f9507f7aeeffca7849db3.png)
分かりやすいようにもう1つ玉を追加しておこうか。引数はまたまた適当でOK。
![](https://scratch.coach/wp-content/uploads/2024/04/72c9b4d4fe9014327bd12f14738e3dd2.png)
玉のデータを取り出す
さて、玉のデータをリストから取り出す方法を紹介する。といってもカンタン。1つ目の玉はリストの1から6にデータが入ってるから、変数「現在の玉」の値がゼロならプラス1すればX座標のインデックスになるし、プラス2すればY座標のインデックスになる。
![](https://scratch.coach/wp-content/uploads/2024/04/21088486235a3d669ca4d51e3e2ed068.png)
ループの中で使われているX座標の値に、リストの中に格納されているデータを使うように↓こんなふうに演算を使ってみよう。
![](https://scratch.coach/wp-content/uploads/2024/04/a554cee83d339ab5dbdbdda10621ced2.png)
Y座標側も同じようにしよう。
![](https://scratch.coach/wp-content/uploads/2024/04/2d033b5f7cfc78174c5c22abf90bb685.png)
この状態でテストしてみると、リストの中身を手動で変えれば玉が動くようになっているはずだよ。
![](https://scratch.coach/wp-content/uploads/2024/04/93c0011e1697ebddb937283f07bec8d0.png)
定数「■玉データの項目数」を作る
さて、この6というデータは重要な数字だし繰り返し使われるので、分かりやすさのために変数にしておこう。その際に■から名前を始めておくことで、この変数はゲーム開始後は変わらない、という意味合いを込めておこう。こういう変数を定数って呼んでるよ。
![](https://scratch.coach/wp-content/uploads/2024/04/5996cd28ea1cbbfdbebbda8e93dd1d6e-965x1024.png)
![](https://scratch.coach/wp-content/uploads/2024/04/632e7ff53f425db9446e0f9631baf283.png)
さっき使ってた6の部分を定数で置換しよう。
![](https://scratch.coach/wp-content/uploads/2024/04/76b2dd85b1dd3d718e58695dcc54d2b7.png)
ループ内にも6があるから定数で置換しよう。
![](https://scratch.coach/wp-content/uploads/2024/04/aabf727e856a062ec3899c4fae38f66e.png)
各種の定数を用意しよう(X座標やY座標など)
さて、「現在の玉 + 1」はX座標を意味する、と書いたけど、これを何ヶ月も先まで覚えておく自信は僕にはない。そこでこのプラス1の1はX座標のことでっせ、という意味合いを込めた定数を作っておこう。
![](https://scratch.coach/wp-content/uploads/2024/04/e1c4564fb0e9580aa2a7e639f33d41d6-960x1024.png)
その他のデータも同じように作る。
![](https://scratch.coach/wp-content/uploads/2024/04/f1ce81d326bffc6038222b11c2949ac8-967x1024.png)
![](https://scratch.coach/wp-content/uploads/2024/04/5ca6b9fc6bed2a78e3b551dbcc2b4543-963x1024.png)
![](https://scratch.coach/wp-content/uploads/2024/04/827efd508b152a66553b4287d32f1587-965x1024.png)
![](https://scratch.coach/wp-content/uploads/2024/04/6eca475340bd9b1b3957d179a658ceeb-965x1024.png)
![](https://scratch.coach/wp-content/uploads/2024/04/2e4b980de65bc8b08c0e5e15564c30d5-958x1024.png)
それぞれの定数を緑の旗が押されたときに初期化するぞ。
![](https://scratch.coach/wp-content/uploads/2024/04/459edd7071b63e2e88c0c436bbf680f8.png)
ついでに玉を追加する定義内の残りのデータにも値を入れておこう。
![](https://scratch.coach/wp-content/uploads/2024/04/cc21c6f58ab72c7b77fc6abd81ad9794.png)
直接1とか2とか書いてあったマジックナンバーを定数ブロックで置換しよう。
![](https://scratch.coach/wp-content/uploads/2024/04/872a64465e66da8afcdd6713c9dd7e49-1024x269.png)
定義「_玉を描画する」の名前を変える
![](https://scratch.coach/wp-content/uploads/2024/04/8aefa1340210bc46f74e9d62116619c9.png)
_メイン処理を実行する、っていう名前にしておいて。
![](https://scratch.coach/wp-content/uploads/2024/04/620772e56756116fec932628612cc845-1024x791.png)
重力を作る
玉が落ちる処理を作るよ。
定義「_重力を適用する」を作る
画面を再描画せずに実行するよ。
![](https://scratch.coach/wp-content/uploads/2024/04/1798d413aa248e15dd1ad1ecc47e2904-1024x791.png)
実行する場所は、↓ここ。
![](https://scratch.coach/wp-content/uploads/2024/04/4f3ceeebe0be0da6cc6e4d595b530cf9.png)
定義内では玉一覧のデータを変えていく。まずはリストの◯番目を◯で置き換えるブロックを置いて、↓この演算を入れよう。
![](https://scratch.coach/wp-content/uploads/2024/04/10a1a9a300f887d6aca64525e6c0f4df-1024x264.png)
さらに、空いてるスペースで↓コレを作る。
![](https://scratch.coach/wp-content/uploads/2024/04/3e6b927e900ffb5d94578797fbfb0189.png)
そこからマイナス0.6する。
![](https://scratch.coach/wp-content/uploads/2024/04/3c06d75bea26f41a3ca74c53bbde1710.png)
これをさっきの置き換えるブロックの右側に入れよう。
![](https://scratch.coach/wp-content/uploads/2024/04/af0bb5fdd0d8ad7c8bc2a95b17852d7c-1024x155.png)
この長いブロックをそのまま複製しよう。
![](https://scratch.coach/wp-content/uploads/2024/04/bde5ba0c2e229df81334ca62e7355737.png)
■スピードYのところを■Y座標にしよう。ついでに右側のブロックは外しておこう。
![](https://scratch.coach/wp-content/uploads/2024/04/b2525f8c055afafa0944b22003953eb9-1024x254.png)
右側には↓この演算を当てはめる。すこし長いから注意して作ってね。
![](https://scratch.coach/wp-content/uploads/2024/04/26bf6c85e6a1b4112a5c68303ff9b18e-1024x94.png)
右側にはめよう。
![](https://scratch.coach/wp-content/uploads/2024/04/6e689d71363b6f5f0f8cadd0cecd8cbb-1024x77.png)
よし、このタイミングで玉の引数を少し変えておこう。高い場所から落ちるようにしておくぞ。
![](https://scratch.coach/wp-content/uploads/2024/04/787625e82082127f3e645e65aaddd46b.png)
現在の玉の各種値を持つ変数を作る
6個つくるぞ。
![](https://scratch.coach/wp-content/uploads/2024/04/7061afabad8623ca59cb579efcfe15bd.png)
![](https://scratch.coach/wp-content/uploads/2024/04/25c2b4aa55907db8507bb5a0098ac18a.png)
![](https://scratch.coach/wp-content/uploads/2024/04/9c3a65a4209388fc51054187cc890325.png)
![](https://scratch.coach/wp-content/uploads/2024/04/2e002e4be7deeed16f98e4d8df577dc9.png)
![](https://scratch.coach/wp-content/uploads/2024/04/371e75b8b04711934af7fc989c441aca.png)
![](https://scratch.coach/wp-content/uploads/2024/04/17c7daece68c1bfc39b4a253a33f5db2.png)
定義「_メイン処理を実行する」のループ内で、この変数に値を入れていくよ。
![](https://scratch.coach/wp-content/uploads/2024/04/285935620b0ef2bd57abfa5512f53353.png)
変数にはリストの値を入れるようにする。
![](https://scratch.coach/wp-content/uploads/2024/04/44c18af6c446edf8b5e9a364dea09ae2-1024x390.png)
これを合計6個つくる。
![](https://scratch.coach/wp-content/uploads/2024/04/26006c9a8fa64b342021d7d7ed56cb6d-1024x575.png)
重力で使ってた演算を差し替える
さっき作った重力の処理で、リストから直接データを取って部分あるよね。それを今作った変数で差し替え用。
![](https://scratch.coach/wp-content/uploads/2024/04/a5cf45686624dbf04239b11963590d84-1024x194.png)
下も同じようにする。
![](https://scratch.coach/wp-content/uploads/2024/04/79fa6dedeed0e8d9293f899f96cb0fb9-1024x78.png)
グッと読みやすくなったと思う!
![スイカゲームの作り方① スタンプをリストで管理する土台を作るを語るok-scratch](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
u003cpu003e読みやすいコードは重要!u003c/pu003e
玉の値を変更する定義を作る
少し変則的な名前の定義を作るよ。
![](https://scratch.coach/wp-content/uploads/2024/04/e432d87eb91c8c9ab1ac352a63ac0f38-1024x790.png)
この定義内では、リストの値を置き換えるブロックを置く。
![](https://scratch.coach/wp-content/uploads/2024/04/c62fcea575430ebe50fe750074b93286.png)
この定義を重力のところで使ってみよう。
![](https://scratch.coach/wp-content/uploads/2024/04/bd3dc651cff39b542875784bf26be7a3-1024x278.png)
![](https://scratch.coach/wp-content/uploads/2024/04/db257548ba82ffcb9a8bd5ddf143f726-1024x192.png)
↑さらに読みやすくなったと思わない?
![スイカゲームの作り方① スタンプをリストで管理する土台を作るを語るok-scratch](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
u003cpu003e読みやすさのことを可読性と呼ぶ。プロの現場では可読性が高いコードのほうが、複雑で難解なコードよりも喜ばれる。簡便化できるのに複雑なコードを書くのはときにマナー違反ですらあるから、常にシンプルにできないか考えるクセをつけよう。まぁ無理する必要はないよ。最初は複雑になりがちだし、純粋に処理が複雑な場合は演算も複雑になってしまうことは往々にしてある。u003c/pu003e
定義「_玉の情報を更新する」を作る
さっきつくった自分の◯◯に値をいれるブロック群をいったん外そう。
![](https://scratch.coach/wp-content/uploads/2024/04/2a2f5a10b7cee45635fe6fce028b3fa0-1024x473.png)
↓こんな状態になるよ。
![](https://scratch.coach/wp-content/uploads/2024/04/ee9054d0430e3d969ebb495cd55b3e3d.png)
定義を作る
![](https://scratch.coach/wp-content/uploads/2024/04/3f328e94d0b8e1688f2ce563216b8753-1024x754.png)
定義内にさっき外しておいたブロック群をもってこよう。
![](https://scratch.coach/wp-content/uploads/2024/04/10cd47f6ebd21bf9187999ded1a4ef85-1024x682.png)
重力のところで使っていくぞ。
![](https://scratch.coach/wp-content/uploads/2024/04/26f334cbb5fccb74eb89d58bee69dfd4.png)
箱の端で玉を止める
箱の端は下側だけではなく横側にもある。合計3箇所の「端」があるよね。それを加味したコードをしていくよ。
定義「_箱の端で止める」を作る
![](https://scratch.coach/wp-content/uploads/2024/04/9066ceef1e9e0968a9f91bcb47729d57-1024x768.png)
![](https://scratch.coach/wp-content/uploads/2024/04/17f76b68801b55db3d963b5a83cc636a.png)
![](https://scratch.coach/wp-content/uploads/2024/04/27db3a477ca54a9681d43afd6c886b2d.png)
条件式の演算を用意する。
![](https://scratch.coach/wp-content/uploads/2024/04/630d7b9cc23e1e34cdad7d0a9d7a9a2f.png)
![](https://scratch.coach/wp-content/uploads/2024/04/2f73c5b0404d9ef13e940759a16e095f.png)
この条件ブロック内であれば、「端である」ということ。
この中で使う演算を作っていく。
少し長いからワンステップずつ進めていくよ。
まずは↓これらを用意する。
![](https://scratch.coach/wp-content/uploads/2024/04/0ed7bf48665861208efb45699ac697ed.png)
そして変数を入れていく。
![](https://scratch.coach/wp-content/uploads/2024/04/4beabcd376ecc99be9720fb14ecd9a0d.png)
これらを合体しよう。
![](https://scratch.coach/wp-content/uploads/2024/04/5184a51caa61afd761da0979db9da665.png)
そして玉の値を変える定義で使うよ。
![](https://scratch.coach/wp-content/uploads/2024/04/09bc655b024e57eb309f4090950dd1cc-1024x223.png)
こうすることで今後横側の端で玉を止めるときにもそのままこの演算が使える。
追加していこう。
![](https://scratch.coach/wp-content/uploads/2024/04/098710ed0677b2be391084ba5ec22e55.png)
X座標のときとY座標のときので、追加の処理をくわえていく。
![](https://scratch.coach/wp-content/uploads/2024/04/e5d9c89173359b85a4f5a4135786b997.png)
といってもここではY座標のとき、つまり下側の端で追加したい処理だけ作っておく。
![](https://scratch.coach/wp-content/uploads/2024/04/3ddecc9cfd74b4b2d8088a4ec5d90106.png)
定義を実行するのは↓こちら。
![](https://scratch.coach/wp-content/uploads/2024/04/229dd6de761fc9fa619303246303f01e-1024x561.png)
あと直前で玉の情報を更新しておこう。
![](https://scratch.coach/wp-content/uploads/2024/04/1ef6979939f43d847048643c7400e8d5.png)
定義「_玉を描画する」を作る
![](https://scratch.coach/wp-content/uploads/2024/04/d603ff20529247f90924d0c06275cc9f-1024x747.png)
↓このブロックを移動しよう。
![](https://scratch.coach/wp-content/uploads/2024/04/394be5693641a52840678bf598079c1b-1024x512.png)
こんなかんじ。
![](https://scratch.coach/wp-content/uploads/2024/04/32996c9c2641b151911bde762ce3ef1c.png)
玉の情報も更新する。
![](https://scratch.coach/wp-content/uploads/2024/04/7de409ff90de6c32cf5c8adc9bc26172.png)
メイン処理で実行させよう。
![](https://scratch.coach/wp-content/uploads/2024/04/dd0a8d257a6523342fd4101fa8956fd5.png)
あと、リストのデータを直接参照するのではなく、変数に入れてある値を使って可読性を高めよう。
![](https://scratch.coach/wp-content/uploads/2024/04/7e0ef25e241f5e50a614b6e74b3b0efc.png)
衝突処理を整えていく
玉と玉がぶつかるというのはスカゲームの華だよね。この処理はぶっちゃけスーパー難しい。本格的に取り掛かるのは次回からだけど、ちょっと慎重に進めていこう。
定義「_玉同士の関係を更新する」を作る
![](https://scratch.coach/wp-content/uploads/2024/04/73cc6db1ac49ada0037b251201300967-1024x760.png)
![](https://scratch.coach/wp-content/uploads/2024/04/562cb15bc4c438071b7f548e80306f4f.png)
変数「相手の玉」を作る
![](https://scratch.coach/wp-content/uploads/2024/04/a76cd503d3fc792a9fd495a5812340a9.png)
![](https://scratch.coach/wp-content/uploads/2024/04/544f0c95b2a45ce7094f97ebb1430fbc.png)
![](https://scratch.coach/wp-content/uploads/2024/04/99811a3924c7d3929429c6c1dcaeac48.png)
ここでも玉の数だけ繰り返すようにしよう。
![](https://scratch.coach/wp-content/uploads/2024/04/8e8881cd9866b84522fca2d948ad649d.png)
![](https://scratch.coach/wp-content/uploads/2024/04/94d39be781a61c49c6658039a21c456f.png)
自分と自分は判定する必要はないから、それ以外のケースで通る条件式を作る。
![](https://scratch.coach/wp-content/uploads/2024/04/3dec597539e00c45878a3eeb238023fa.png)
ループの最後で相手の玉を加算するブロックを置いておこう。ここが動くのは次回チュートリアルからだから、とりあえず置いておくかんじ。
![](https://scratch.coach/wp-content/uploads/2024/04/2596b0b0a7bdb27a1b8212f4917acee0.png)
定義「_直線距離と重なりを計算する」を作る
![](https://scratch.coach/wp-content/uploads/2024/04/2f7e6b8bf1a45896007c43ab029bd82a-1024x756.png)
![](https://scratch.coach/wp-content/uploads/2024/04/6d6ff6f7ff8d27d26d13d5804fd5f677.png)
まとめ
おつかれさま!1回目からなかなかヘビーだったかな?ここから衝突処理に取り掛かるよ。直線距離の計算とかはピタゴラスの定理を使うんだけど、ゲーム開発ではすごく役に立つ。3Dゲームを作るときにも使える定理だったりするから、このタイミングで一緒にタックルしておこう。