今回はスクラッチを使って鬼滅の刃風の市松模様を作っていきます。正方形のクローンを並べて市松模様を作っていきますが、ぴっちりきれいに並べたり、瞬時に表示するには少しコツが必要です。ボードゲームなど、市松模様を使うことも多いと思いますので是非マスターしてください。
今回作るもの
まずは今回作るものを確認しましょう。緑の旗を押すときれいな市松模様が表示されるのがわかります。
正方形(30ピクセル)のコスチュームを２つ用意して以下のコードを書けば作成できます。
では、詳細を解説していきます。
ぴったりサイズの正方形を作る
まず大切なことは、市松模様用のぴったりサイズの正方形を作ることです。少しでもずれるとガタガタの市松模様になってしまいます。
ぴったりサイズの正方形を作るために、スクラッチで初めから用意されている30ピクセルのグリッドを使います。ただし、グリッドは背景にあるので背景から持ってこなければなりません
背景からグリッド素材をコピーする
まず、ステージから背景を選ぶを選択します。
そうすると、背景の一覧が出てくるので一番最後にあるXy-grid-30pxを選択します。
すると、以下のように背景に設定されるのでベクターに変換を押します。
ベクターに変換されてグリッドを画像として選択できるようになったので選択ツールで選択してコピーボタンを押します。
これでグリッド素材がコピーできました。
グリッドにそって正方形を描く
次にグリッドに沿って正方形を描いていきます。
新規スクリプトの追加ボタンから描くを選択します。
すると、描画の画面が出てくるので、ペースト（貼り付け）ボタンを押して、先ほどコピーした背景を貼り付けます。そして拡大ボタンを何回か押して下図のようにめいいっぱい拡大します。
この拡大されたグリッドに沿って正方形を描いていきます。
以下の図のようにちょうどグリッドの青い線の真ん中になるように正方形を描いていきます。
この微調整を頑張ればビシッときれいな市松模様ができます。
鬼滅の刃風にしたいので色は緑色（色:46,鮮やかさ48,明るさ72）に設定しています
正方形が完成したら、ガイドにしていたグリッドの画像を削除して、正方形の中心をコスチュームの中心にあわせます。
ここまでできたら、コスチュームを複製してもう一色の黒色の正方形を作成します。
これで準備ができました。
市松模様を描くコードを書く
ではコードを描いていきます。
考え方
市松模様は30ピクセルグリッドにそって作っていきますが、一番左上のマス目の位置は(x:-225,y:165)になります。そして各マス目の間隔は30ピクセルとなります。それを１６列×１２行作っていきます
市松模様を描く基本的なコード
これをコードで書いていくと以下のコードとなります。行目・列目の変数を作り
左上から順番に、１行目、２行目、３行目の順番でクローンを作っていきます。
ポイントは※で書いた部分です。市松模様にするには２色が完全に交互になる必要があります。
下の図はそれぞれのマス目に行と列の値の合計が書いてあります。すると、黒の部分は偶数、緑の部分は奇数になっていることがわかります。
奇数は２で割ったら１余るので、上記のようなコードとなります。
これで市松模様を作れるようになりました。緑の旗を押してみましょう。きれいな市松模様ができると思います。
ただ、市松模様を作るのに７秒もかかってしまうので、これではゲームを始めるときにいちいちステージができるのを待たなければなりません。最後に、これを一瞬で表示する技をご紹介します。
一瞬で市松模様を描画する
一瞬で処理を行いたいときにはブロック定義を使います。以下のように市松作成というブロック定義を作ります。
そしてブロック定義を作るときに、以下のように画面を再描画せずに実行するというボタンにチェックを入れます。
こうすることで、ブロック定義部分の処理を一瞬で行うことができます。
実際に緑の旗を押して実行してみましょう。一瞬で描画できれば成功です。
すべてのコード
すべてのコードはこちらからも確認できます。自由に活用してください。
補足）背景に使う場合は画像化がオススメ
スクラッチのクローンの数は３００が上限です。今回市松模様に16×12=192個のクローンを使ってしまっているので、あと108個しかクローンが使えません。そこまでクローンを使わないゲームであればそれでも大丈夫ですが、市松模様をただの背景として使うのであれば、画像にしてしまうことをオススメします。
まず、市松模様をコードを使って描画します。
そして、右上のボタンを押して画面を最大化します。
次に、キャプチャーツールを使って切り抜きます。キャプチャーのコマンドはwindowsとmacで以下の通りです。（機種によっては違う場合もあります）
キャプチャーツールで以下のように画面ギリギリを選択して切り抜き、パソコンに保存します。
背景をアップロードを選択して先ほど保存した画像を指定すれば背景に設定完了です。
