先日は
にてクローンを使ったり条件分岐ではなくイベントとして独立して動く方法でイベントハンドラを使った物を紹介しました。
Scrachでプログラミングをする場合、挙動の部分まで定義したブロックと使ていましたが、これを行うと、【 機能の追加 】 を行いやすくなります。
例えば、
の構造の場合、【 挙動を実装したブロックの実行 】 をしているので、この挙動部分を変更する事で変化を追加する事が出来ます。
例えば、
の状態を
のように回転させると、
のように向きが変わります。これは、
のように初期化の指定の中に、回転方向を左右に固定しているので、左右の転換のみが実行されます。つまり、
のような回転角の指定をすると、この設定をすると、左右の切り替えのタイミングを角度の指定だけで行う事ができます。
その為、
のように角度を上げる左右を向く速度が変わります。これはモーションの数が足りていませんが、これを行うと回りながら移動しているように見えます。
キ ャラクターのコントロール
前述のように、初期設定で条件に縛りを入れておくと回転の状態に縛りをかける事が出来ますが、キャラを表示するだけではなく、先日のPencileのスタンプの機能を使った時のように移動時に追加しながら移動する事もできます。この時に使うのがクローンになります。
■ クローンを使う
クローンは、制御の中に含まれており、
のブロックを使う事になります。この時に
■ クローンの生成
■ クローン生成時の挙動
■ クローンの消去
が行えるようになっており、イベントのブロックと処理のブロックがそれぞれ用意されています。
のようにクローンを生成するようにすると、
のようにキーを押さないとその場所に静止した状態になり、キーを押すと、
のように残像を描くようになります。ここにもう少し機能を入れる為に、
のように制御から、幽霊の効果を0にするようにして、クローン挙動に
のように幽霊の効果を50にした物を追加します。
このブロックは、
の色の変化を扱うブロックになりますが、これを使うと、色々な効果をブロックの項目と数値だけでコントロールできるようになっています。
そして、クローンの生成時のイベントも用意して
のようにすると
のように静止時にはそのままの状態を維持しますが、移動すると、
のように半透明になって残像が出るようになります。そして、
のように移動量を増やして速度を上げると、
のように間隔が広がります。ただし、動かしていたら途中で残像が出なくなったので遅延を入れて調整をしてみました。
のようにして動作させたところ
がいきなり途切れることは減りましたが、根本的な原因はよくわかりません。
■ 移動時に残像が出るサンプル
■ 残像の色を変える
クローンを作るとクローン元のスプライトの色が反映されますが、この色を変更する事もできます。これは、見た目の中にある色の項目で調整できますが、
のようにすると、
のように黄色になり、
のように180にすると、
のように赤色になります。
■ 残像のテスト（色の変化）
この処理は、
で動作していますが、残像の部分を追加しただけなので、変更した部分は
の5つの項目のみになります。元からあった物を変更して、クローン関連の物を増やした状態になりますが、基本部分の変更は行われていません。この処理を行うと残像が消えるバグが顕著に出るようになってしまったのですが、実際に動かすと、
■ 残像のテスト（謎のバグ）
のようになります。
このような構造にすると実行する処理の部分が独立しているので、個別に修正をするだけで共同を変更する事が出来ます。つまり、独立して定義した部分のブロックを変えるだけで挙動の変更を行う事ができます。
イ ベントでの制御
先日は、メインループの部分で処理を実装しましたが、Scratchでは、イベントハンドラをイベント発生で動作するブロックに実装する事が出来ます。その為、独立したブロックが増えますが条件分岐を使わずにイベントハンドラによる処理を実装できます。
キャラの動きについては、
■ アニメーションしながら動く物
のように動かすこともできますが。これについては、
■ Scratch ： キャラのモーションを入れて左右に動かす
の中で依然動かし方については書いていますが、条件分岐が複雑に案らない状態でも挙動の実装をする事が出来ます。
今回は、1方向のみの動作でそれを実装してみました。挙動としては、
のようにしていますが、イベントハンドラは
の様な感じに実装しています。そして、挙動については、
のように停止状態と動作の状態を指定してをり、アニメーションとして
のような感じで処理を追加しています。この処理では、
【 移動 】 ➡ 【 モーション 】
の流れになっていますが、メインのループで初期化をしておいて、その後、独立したイベントハンドラで動かすとこのような構造になりますが、先日の
と同じように処理の構造を部品レベルで分けて考えると、アプローチに関係なく管理をする事が出来ます。
素 材の制作
Scratchでは、GUIを使ったアプリケーションを作れるので、
■ スプライト
■ 音
を追加してそれをブロックを使って制御する事が出来る王になっています。
Scratchでは、オンラインもそうですが、オフライン環境で使用した場合でも実装された素材を使う事が出来るので、素材を呼び出してプログラミングを行えるようになっています。
ス プライト
Scratchの画面は
■ スプライト
■ 背景
で出来ているので、背景は画像を使う事になりますが、スプライトは
の場所で指定できますが、
の場所で 【 スプライトを選ぶ 】 を選択すると最初から用意されているスプライトを使用できます。選択後には、
の中からスプライトを選択できます。その上は
のように 【 描く 】 を選ぶと
のように何もないスプライトが追加されここで素材を作る事が出来るようになっています。そして、
は、ランダムで素材が呼び出されるようです。ここまでは、
■ 用意された素材を使う
■ 素材そのものを作る
と言う選択でしたが、
の 【 スプライトをアップロード 】 を選択すると事前に作成した画像ファイルを読み込んで使用する事が出来ます。
ファイル形式は、
のようになっており、
■ ＳＶＧ
のようにベクターグラフィックが使用できるようになっていますが、これとは別に
■ PNG
■ BMP
■ JPEG
■ GIF
のようなラスターグラフィックを使用できるようになっています。
スプライトには、複数のコスチュームを格納できるのでイメージとしては、
📁 ： スプライト
┃
┣ コスチューム １
┣ コスチューム ２
┣ コスチューム ３
┣ コスチューム ４
┣ コスチューム ５
のような構造になっています。その為、
コスチューム ⊂ スプライト
のような構造になっています。
■ スプライト
スプライトの編集をすると、
のような画面になっていますが、元から用意されているスプライトには
のように複数のコスチュームが配置されています。これが画像ファイルになりますが、この追加も
の場所から追加できるので、キャラのモーションを追加する際に新規のコスチュームを追加したい場合にもこの場所でスプライト内に配置する事が出来ます。
元から用意されているコスチュームも画像なので変更が出来るのですが、
のように開いたコスチュームも
のような形状で出来ているので、これを動かしたり意図を変えることもできます。
また、用意されているスプライトの多くはベクターグラフィックなので、
のようにコントロールポイントを扱えるようになります。これを使う事で
のように形状を経系する事が出来ます。ベクターグラフィックは、
■ ストローク ： ラインの部分
■ フィル ： 内部の塗りの部分
で構成されており、ベクターグラフィックは視点と終点で生成される線分が存在し、その線分と存在する頂点の負荷要素であるハンドルによって曲線補間の度合いを変更して形を作るような仕様になっています。
その為、ベクターグラフィックは
のような頂点とハンドルで構成された物を使用して線分や形状を作る事になりますが、この時に線分の始点と終点を繋いでできた形状の内部をフィルとして扱い、その部分に彩色をする事によって形状を扱える仕様になっています。
スプライトは形状の追加もできるので、
のようにパーツの追加が出来ますが、この時に
■ 線
■ 円
■ 四角形
■ 文字
のように形の決まった物を作る事が出来ますが、テキストだけは一つの塊になっているので、文字列を個別に変形させたい場合には個別のスプライトを作ってそこで図形を作って動かす事になります。
また、色も変更できるので、
のようにできますが、ベクターグラフィックからラスターグラフィックに変更する事もできます、これを行うと、
のようなドットの集合にする事もできますが、
■ ラスターグラフィック
■ ベクターグラフィック 
のようにラスターグラフィックではアンチエイリアシングが行われていないので輪郭にエッジが出ていますが、ベクターグラフィックの場合にはそれがありません。
そして、スプライトを編集すると、
■ コスチュームを描く場合
コスチュームを描く場合、先程の基本形状の組み合わせで形を作る事もできますが、それ以外だとペンツールで描く方法があります。Scratchで新規コスチュームを作る際にはベクターグラフィックの作業になるので、基本形状に頂点を追加して形状を変形していく事もできますが、ペンツールを使って手描きで描いた物を調整する事もできます、手描きで描いた場合、内部まで塗り込んでおくとその部分は、
のようにアウトラインの部分に頂点が密集するような作りになるので、ベクターレイヤーで絵を描くのと同じように描くことができます。その為、ペンで描くのもこんな感じで描いていく事が出来ますが、消しゴムを使って
のように消すと
のように形状のを加工できますが、ペンでレタッチをして隙間を消すと
のように外形部分だけ頂点が用意された状態になります。当然、この弔電は全て加工ができますから、
のように頂点の位置の変更ができますが、ハンドルを使うと
のような加工をする事が出来ます。そして、頂点がない場所をクリックすると
のように頂点が追加されます。その為、
のようにハンドルを一つの塊として扱う事もできますが、ハンドルを曲げることが出来るので
グ ラフィックツール
グラフィックを扱う場合、WINDOWSだと、ペイント３Dなども使えますがレイヤーがないので個別のファイルで素材を作て知っ事になりますが、レイヤーがある場合にはアニメーションGIFを作る時のようにレイヤー単位でパーツ分けをして作業をする事が出来ます。ペイント３Dについては、
の中で触れていますが、通常のラスターグラフィックだけでなく範囲選択をして3Dオブジェクトにする事で、ベクターの素材として使用する事が出来ます。これによりテクスチャーの張られたポリゴンのような扱いが出来るので、その素材の奥行きを変更する事で素材の位置の変更ででレイヤーの階層を使ったような位置関係の調整が出来るようになっています。
別 のツールで素材を作る
Scratchでは、ソフト単体で素材を作れるので、アプリケーションを作る上での
■ 素材
■ システム
の双方を1つのソフトだけで作れてしまう仕様になっています。
ゲームエンジンもそう言った仕様になっているのですが、アセットストアでの学習用のアセットを用意すると挙動を実装して動かすまでの事を楽手出来るようになっていますが、Scratchの場合、 【 システムの実装の為の学習 】 についても色々なサンプルがあるのでそれを見て学習する事で何をすればいいのかを理解しながら実装する事が出来ます。
当然、全てのシステムを作る事も可能ですから、挙動を考えながらブロックを使って実装していく事もできます。
アプリケーションを作る時にVisualStudio Comminutyのように無償で使用できるツールもありますが、こう言ったツールを使うとシェーダーのプログラミングも行えますが、現在は二次元配列だけでなく三次元配列で制御するような二変数関数のグラフ上に存在する座標制御をする物もごく当たり前に作れるようになっています。
Scratchの場合、二次元ですから、数学で登場する座標平面での考え方になりますが、グラフィックは恒等式の解を変数の推移によって示した時に使用するグラフと同じ考え方ができますし、物理の分野で考えると、力の向きを示すベクトルを幾何で示した物なので平面座標上の幾何ベクトルと考えることができます。
音については、音は空気の振動によって生じている波なので、自然界の波を構成する形状であるサインカーブになっていますから、これも関数のグラフになります。
この条件を見ると、グラフィックや音は関数制御なので数式と数値で制御できるというのもイメージしやすいのではないかな？と思いますが、グラフは 【 数直線に層を持たせたもの 】 なので、一変数関数で使用する座標平面については、数直線の持っているデータをX軸に向かってそう持たせてその座標の並びを示した物になります。これが線分に見えるのは密度が高いだけなので、実際には個別のデータが順番に並んでいます。
この条件で考えると、数直線で指定した座標のデータを複数個実装する際の方法がグラフと言う事になりますが、この基本的な概念は小学校低学年で学習する棒グラフと同じ考え方になります。棒グラフは異なるデータを横に並べた物になりますが、この時に個別のデータを対比する宇際に横に並べて示しますが、理科で観察をした時にに定点で観測したのデータを並べる場合だとこのような 【 データを横に並べた状態 】 で配置する事になります。グラフの推移は、一つの出来事の観察をした時の推移と同じ考え方ができますから、X軸を時間軸と考えた時に、サンプリングの結果をY軸の座標としたとき、サンプリングの回数で棒グラフ同士の間隔が変わります。
つまり、この感覚を極限レベルまで狭めて考えるとこの座標間の間隔は殆どなくなるので見た目は直線になります。ただし、座標は値なので、これを推移として扱う場合には、時間単位での変化を出す必要がありますから、始点と終点となる座標を用意してその推移を出すと時間単位の変化を出す事が出来ます。
これは Y軸の値 / X軸の値 になるので、推移は傾きで示す事が出来ます。推移をする物の瞬間的な平均値を出す場合だと、極限レベルで発生しているその状態を示す事で導き出す事が出来ます。このように微細な座標の集合がどう言った形で変化しているのかでグラフの形も変わってきますが、この構造を知ると、グラフは【 綾井を持った数直線の層 】として考えることが出来るので、二次元のデータが三次元になった場合にも、現存する二次元配列のデータに層を持たせたものと考えることが出来るわけです。この事から
【 次元 】 ＝ 【 層 】
と考えることが出来るわけです。
その為、変数で音や画像を制御できるようになっている訳ですが、それをコードでの制御ではなく、直管的な操作で行えるようにした物が、グラフィックツールや波形編集ソフトやDAWになります。
■ ラスターグラフィックツール
ラスターグラフィックツールは、ドット集合体で絵を再現する仕様の物になります。なので、【 解像度 】 の概念があります。その為、
のようにドットの角が出るのがラスターグラフィックの特徴になりますが、この処理は 【 ドットの数 】 が座標になるので、整数の処理で色彩の情報を乗せる座標の指定をします。
基本的に表示機材がラスターグラフィックのようにピクセルの集合で解像度が指定されていますが、映像や写真も同様にラスターグラフィックが使用されています。3DCGもラスタライズでレンダリングをしているので表示の段階ではラスターグラフィックになっています。
ラスターグラフィックツールだと
■ GIMP
■ Krita
https://krita.org/jp/features-jp/
のようにオープンソースのツールもありますが、これとは別にフリーウェアの
■ メディバンペイント
も使用できます。こうしたツールを使うとレイヤーを使えるので階層別に分けた状態で塗りや線画を管理できるので塗りをする際に
■ 線画
■ 塗り
のような区分けをするだけでなく、
■ ベースカラー
■ ハイライト
■ シャドウ
のような色分けを個別の色単位で分る事もできます。また、レイヤーグループが使えるので、最初に下絵や線画でアニメーションの始点と終点の部分を描いて原画部分を仕上げた後にその中に必要なフレーム数で動きを入れることになります。その中割の線画を描いた後に各線画をレイヤーグループに入れて線画の下に塗りのレイヤーグループを用意して管理すると各フレームの彩色までの作業を行う事が出来ます。
各フレームをレイヤーグループで管理すると、画像として保存するフレームのレイヤーグループのみをオンにしておくとそのフレームの画像を出力をする事が出来ます。
デジタルで絵を描くとレイヤーが物凄い数になりますし、GIFアニメをその塗り方で作るとこれも凄い事になるのでレイヤーだけをそのまま増やすとどこに何があるのか解らなくなりますが、レイヤーグループにするとフォルダー分けが出来るだけではなく畳むことが出来るので、名称＋フレーム数のような状態で名前を付けておくと選択しやすくなります。また、完成後にチェックをする際にもレイヤーグループの表示・非表示で確認が出来るので作業がしやすくなります。
そして、完成した後に一旦保存をしておいて、作業が重たいようだと、レイヤーグループ内のレイヤーを統合すると軽量化が出来るので、統合後の物を別のプロジェクトファイルとして保存しておいて出力をするとレイヤーが多い状態で作業をするよりも負荷を下げることができます。
ラスターグラフィックツールはドットの色の指定で画像を作っているので、
のような状態になりますが、この状態を解消する為にラスターグラフィックではアンチエイリアシングを適応して輪郭の違和感をなくすような処理が適応されています。
ラスターグラフィックについては、
の中で触れていますが、
輪郭部分に近似の色を並べるだけでも
のような違いが出ます。色数が少ないのでソフトシャドウが落ちているような感じになっていますが、同じ形でも二値とグレースケールで補完した状態では画像のような差が出ます。
■ ベクターグラフィックツール
ベクターグラフィックツールは座標を指定して座標間の線分の状態をハンドルによって曲線補間の度合いを指定して調整する物になります。2Dの場合だとドロー系ツールと言う名称で呼ばれていますが、Adobe Illustratorなどのツールがこの方法で画像を作る仕様になっています。オープンソースのツールだと、
■ InkScape
がありますが、3DCGツールもベクターグラフィックになります。この場合、SVG出力をすれば2Dのベクターグラフィックでの書き出しが出来るので、Blenderを使うとSVG形式で画像の出力ができます。
■ Blender
また、ポリゴンやパスだけでなくグリースペンシルを使えるので、アニメーションまで作れるのですが、YouTubeの公式チャンネルには、グリースペンシルを使ったアニメーションがアップされています。
あと、レンダリング時にコンポジットノードでピクセル化もできるので色々と選択肢がありますが、3DCGツールでもラスターグラフィックだけでなくSVG形式でのエクスポートもできるようになっています。グリ－スペンシルについては、
の中で触れていますが、3Dのビューポート上に絵を重ねることが出来るので3D作画が出来ます。また、
■ Blenderでの2Dの処理 【 Blender 3.2 】
の中で触れていますが、一つ前のバージョンの3.2からSculuptモデリングの時に頂点カラーの指定が出来るようになったので、更に色々な表現が出来るようになっています。
ラスターグラフィックとベクターグラフィックでは、
■ ラスターグラフィック
■ ベクターグラフィック
のような差がありますが、ラスターグラフィックは整数処理なので、 【 回転や拡大・縮小に弱い 】 と言う特性があります。これについては、
の中で触れていますが、ベクターグラフィックで作った物を回転させた状態でタイルにして複製すると、
■ ベクターグラフィック
のように読み込めてそのまま書き出せますが、ラスターグラフィックの状態で回転させると、
■ ラスターグラフィック
のように質感が変わってしまいます。また、少し調整しても
のようになるのでディテールが再現されなくなります。その為、こうした物はドットを打ち直したほうがきれいに仕上げることが出来るのですが、ベクターグラフィックを読み込んでソフト側で処理をした場合にはこうした問題が発生しなくなります。