スクラッチコーチキャンプ スクラッチで使える無料素材集
  • 素材
  • 修行
  • はじめての方へ
  • スクラッチゲームの作り方

    #016 ペン拡張機能のスタンプで星のランダムアートの作り方|100個の星が毎回変わる模様

    #016 ペン拡張機能のスタンプで星のランダムアートの作り方|100個の星が毎回変わる模様
    この記事は スクラッチコーチで掲載されているオリジナル記事 のバックアップです。
    スターター作品
    なし
    今回の完成サンプル
    なし
    [soy-series name="はじめてのスクラッチ"]

    さぁ、スクラッチでナニ作る!?

    動画で見てみよう

    [talk]チャンネル登録して応援よろしく!チャンネル登録する[/talk]

    チュートリアルの元になった作品

    [prj-embed prj="1313592104" mini="1" title="プレイしておこう" prj-title="はじめてのスクラッチ #016 " prj-author="ok-scratch"]今回の[prj-link prj="1313592104" title="はじめてのスクラッチ #016 " author="ok-scratch"]スクラッチを作る参考作品[/prj-link]です。「全部消す」でキャンバスをリセットしてから、100回のループで位置・色の効果・サイズをランダムに変えながらスタンプを押し続ける設計が効いている。クローンは上限300個に縛られるが、スタンプはペンレイヤーへの描画なのでスプライト1つで大量描画が可能だ。少ないコードで視覚的な豊かさを生み出す構造がどうなっているのか、見ていこう。参考資料:スクラッチプログラミング事例大全集[/prj-embed]

    今回の目標

    ペン拡張機能のスタンプを使って、ランダムな位置・色・サイズの星を100個描画するアートを作る。

    スターター作品をリミックスしよう

    このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
    スターター作品をダウンロード

    #1スタート位置の設定

    [talk class="m-l-n"]前回まででスクラッチのいろんな仕組みを使ってきたよね。今回はペン拡張機能の「スタンプ」を使って、ランダムアート作品を作っていくよ。まずはスプライトの初期位置をセットするところから始めよう。[/talk]

    準備

    スプライト「スタースタンプ」を開く

    スタースタンプスタースタンプ
    スプライトについて
    ランダムな位置・色・サイズで星形スタンプを100回押すスプライト。ペン機能を使って画面に星模様を描画する。
    どんな役割か
    星の形をランダムな場所にどんどんスタンプしていくよ!色もサイズも毎回バラバラだから、実行するたびに違う模様ができるんだ。100個の星が画面いっぱいに広がるのを見てみよう!

    実装

    step-0

    イベントgreenflag が押されたときでプログラムをスタートしたら、動きx座標を ( ) 、y座標を ( ) にするでx:0、y:0のステージ中央に移動するよ。スタンプを押し始める前の準備段階だね。[talk]スクラッチのステージって、x座標が-240から240、y座標が-180から180の範囲なんだ。ちょうど真ん中がx:0、y:0で、数学の座標平面と同じ仕組みだよ。右にいくほどxが大きく、上にいくほどyが大きくなるシンプルなルール。今回は中央スタートだけど、このあとランダムな位置に飛びまくるから、スタート地点はぶっちゃけどこでもよかったりするんだよね。[/talk]

    #2星をランダムにスタンプ

    [talk class="m-l-n"]ここからがメインイベント!コスチュームを「Star」にセットして画面をクリア。[/talk] step-1

    ペン全部消すで前回の描画をまっさらにしてから、100回繰り返すループに突入。ループの中では「どこかの場所へ行く」でランダムな座標に飛んで、「色」の効果を1〜10のランダムな値ぶん変えて、大きさも1%〜100%のランダムにセットしてからペンスタンプでスタンプを押す流れだよ。

    [talk]「星を100個並べたい」って聞いたら、クローンを100個作る方法もありそうだよね。でもスクラッチのクローンは上限が約300個で、もっと増やしたくなったら詰んじゃう。スタンプならペンレイヤーにハンコを押すだけだから、1000個でも10000個でもいける。スプライト1つで大量描画できるのがスタンプの強みなんだ。[/talk]次回はペンをもっと使いこなして、ネコに三角形を描かせるよ!

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    旗を押すと、ランダムな位置にいろんな色・サイズの星が100個スタンプされて画面いっぱいに広がったね。

    #3星の見た目や位置をセットする

    [talk class="m-l-n"]100回のループでランダムな位置・色・サイズになるようにブロックを組む。[/talk] step-2

    #4スタンプする

    [talk class="m-l-n"]で、星をどんどんスタンプしていくよ。実行するたびに違う模様が生まれるんだ。[/talk] step-3

    まとめ

    ペンのスタンプ、なかなかすごいでしょ?たった9行のコードで毎回ちがう模様が生まれるの、おもしろくない?クローンとはちがって上限なしで描けるから、もっと増やすのも全然OK。次回はペンをさらに使いこなして、ネコに三角形を描かせるよ!

    ブクマよろしくお願いします!という口コミを寄せてくれた方 ブクマよろしくお願いします!
    どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!