【Scratch入門〜中級編】アドバンスなグラフィックエフェクトを使いこなす


※ 当ページには【広告/PR】を含む場合があります。
2023/01/04
【Scratch入門〜中級編】Scratchで簡単なスネークゲームを作ろう!
合同会社タコスキングダム|TacosKingdom,LLC.

Scratchにはスプライトの表示コスチュームに効果をつけて変化させるための「グラフィックエフェクト」がいくつか存在しています。

普段はなんとなく使っている方もいらっしゃると思いますが、ここではグラフィックエフェクトの使い方をまとめてみます。

とりあえず、今回の記事で説明する7つのエフェクトがどのようなものかサッと試せるプログラムを作成しましたので、復習もかねてご利用ください。


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

Scratchの7つの基本エフェクト

それではScratchでのスプライトに付けるエフェクトがどのようなものがあるのか、どのように使うものなのか、あらためて見ていきましょう。

渦巻き(Whirl)

「渦巻き」はその名の通り、画像の中心点から渦を巻くように回転させて、画像を歪ませる効果です。

合同会社タコスキングダム|タコキンのPスクール

設定する値は、渦巻きの巻具合(=歪み度)となり、その値の絶対値が大きければ大きいほど画像がかき回されて、大きく歪ませることができます。

この歪み度には最大値・最小値が天文学的な値に設定できるので、上限や下限はほぼ無いと思ってもらって結構です。またゼロで元の画像に一致します。

さらに歪み度をマイナス方向に下げていくと、時計回り(右巻き)の渦巻きになり、逆にプラス方向に上げていくことで反時計回り(左巻き)の渦巻きにすることができます。

色(Color)

「色」は、スプライトの色の色相(Hue)を変化させるエフェクトです。

色相はしばしばぐるっと一周する円環に見立てた
「色相環」という考え方にもとづいた変化を行わせることができます。

Scratchの場合、色相環は、
0から200まで値を取ります。

合同会社タコスキングダム|タコキンのPスクール

つまり、元の色相(=0)から値を上げていくことで色相が変化し、200まで来ると元の色相に戻ります。

魚眼レンズ(Fisheye)

「魚眼レンズ」はカメラなどで広角レンズ以上に広い範囲を射影状に写すのに使われる写真レンズの一種です。

値を大きくとればとるほど歪みが大きくなります。

合同会社タコスキングダム|タコキンのPスクール

0から-100(下限値)に値を下げると「負の魚眼レンズ」となり、中心に潰れたエフェクトにもなります。

合同会社タコスキングダム|タコキンのPスクール

ピクセル化(Pixelate)

「ピクセル化」は、設定値を大きくすればするほど、ピクセル画像を粗くなっていく効果です。

合同会社タコスキングダム|タコキンのPスクール

設定値はゼロのときは元の画像と同じです。

また、負(マイナス)の値を設定しても、負の部分は無視され絶対値として扱われます。

明るさ(Brightness)

「明るさ」は、スプライトの画像の輝度(ブライトネス)を-100から100の間の値でシフトさせることができる効果です。

合同会社タコスキングダム|タコキンのPスクール

ゼロのときは元の画像の輝度になり、-100で完全な輝度なし(真っ暗)、100で100%の輝度(真っ白)となります。

幽霊(Ghost)

「幽霊」は、スプライトの画像の透明度をシフトさせる効果です。

合同会社タコスキングダム|タコキンのPスクール

設定値は0から100までの値で、0で元画像と同じ透明度で、100にすると完全に透明になります。

背景が白だと、先程の「明るさ」は輝度を100にすることで真っ白になって消えたように見えているだけでしたが、この「幽霊」を使うことで完全に画像を見えなくすることができます。

ただし、完全に透明になって見えないといっても、スプライトの当たり判定(クリックや壁の衝突)は通常通りのスプライトと同じです。

モザイク(Mosaic)

「モザイク」はスプライトの画像を小さく分割して、元の画像のスペースに小さくした画像を何枚も貼り合わせるようなことを行います。

合同会社タコスキングダム|タコキンのPスクール

指定できる値は「モザイク度」で、画像の分割数に関係した値となります。

このモザイク度は、ゼロ(=元の画像)から最大値は5105の間で設定できます。

モザイク度のアルゴリズムは少々面倒で、理解できてもScratchのプログラミングには大した影響もないので、ここでは説明を省きます。

またモザイクの指定値は絶対値換算なので、結果としてマイナスの値を指定してもプラスの値を指定しても同じになります。


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

2つ以上のエフェクトを組み合わせる

あまり意識的に使うシーンが少ないと思いますが、先程の7つのScratch基本エフェクトは同時に複数の効果を画像にかけることができます。

例えば、「渦巻き」と「モザイク」を同時に2つ使うと以下のような感じです。

合同会社タコスキングダム|タコキンのPスクール

3つ以上でも問題なく使うことができます。

下は「魚眼レンズ」と「ピクセル化」と「色」を同時にかけた効果です。

合同会社タコスキングダム|タコキンのPスクール


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

まとめ

今回はScratchゲームをおもしろく演出するのに欠かせないエフェクトをまとめてみました。

普段は何気なく使っている“脇役”の機能ですが、深くみていくと、色々と発見があるかも知れません。

また複数のエフェクトを組み合わせて、自分のオリジナルの効果を作ってみるのも楽しいと思います。

参考サイト

Graphic Effect