Scratch(スクラッチ)「スキャニメーション」作り方の説明

Scratch(スクラッチ)「スキャニメーション」作り方の説明

Scratch(スクラッチ)「スキャニメーション」作り方の説明

スキャニメーションという目の錯覚を利用した遊びを、Scratch(スクラッチ)でプログラミングしました。

今回のスクリプトはとても簡単で、スリットシートという黒い縞模様(黒以外の部分は透明)を左から右にスライドさせるスクリプトと、スペースキーを押すとスキャニメーション用の静止画が切り替わるスクリプトを作りました。スキャニメーションの要である静止画は、GIMPという画像編集ソフトで加工しました。もちろん、イラストレーターやフォトショップでも作れますが、GIMPはフリーソフトで本格的な画像編集も出来るので、画像編集ソフトをお持ちでない方にオススメです。

人間の目は、見えない部分を予測して補います。パラパラ漫画で漫画が動いて見えるのは、この人間の目の現象を利用しています。スキャニメーションでも、この錯視を利用しますが、パラパラ漫画のように何枚もの静止画を用意することなく、一枚の静止画だけを利用します。ただし、その静止画にある加工を加える必要があります。その静止画の作り方は以下に説明します。

スキャニメーションでは、スリットシートを静止画の上に重ねて、左右いずれかに一定のスピードでスライドさせます。上図のスリットシートをネコの静止画の上に重ねてみると、黒色と透明部分の比が2:1なので、⅓部分の静止画だけ見えることになります。⅓しか見えていないはずですが、皆さんの目にはネコの姿がハッキリと見えると思います。逆に考えると、⅓の静止画が見えていれば、他は人間の目が予測して補ってくれるので、透明部分だけを残して他の部分は削除してしまうのがスキャニメーションです。

スリットシートの黒と透明の比が2:1の場合は、3つの静止画を作ります。それぞれの静止画は、パラパラ漫画を作るときのように、連続して見たら動いて見えるような静止画を用意して下さい。1枚目の静止画にスリッドシートを重ねて、見える部分だけを残して他を削除して下さい。2枚目と3枚目も同じように加工しますが、2枚目と3枚目を作るときはスレットシートを1コマだけ右(左)にスライドしてから、見える部分以外を削除して下さい。

次に、パネルをクリックして、パネルをスライドさせる方法について説明します。

最後に、3つの静止画を同じ位置で重ねて、1枚の静止画に結合します。その上にスリットシートを重ねて、一定のスピードで左から右(右から左)にスライドすると、1の静止画が見えた後、2の静止画、3の静止画が順番に見えます。スリットシートの黒色の部分は人間の目が予測して補ってくれるので、あたかも3枚の静止画が連続して見えるようになるのです。

昔からある遊びのようですが、始めて見たときは不思議な感じがしました。ご興味のある方は、下記のスクラッチプロジェクトをご覧下さい。

【スキャニメーション Scanimation Project】

※スペースキーで静止画を変更できます

【関連する投稿ページ】

・Scratch(スクラッチ)「ブロック崩しゲーム」作り方説明動画

・Scratch(スクラッチ)「野球ベースボールゲーム」作り方の説明

・Scratch(スクラッチ)「イントロ用動画」作り方の説明

・Scratch(スクラッチ)「タイピング風の文字表示」作り方の説明

・Scratch(スクラッチ)「スキャニメーション」作り方の説明

・Scratch(スクラッチ)「スライドパズル」作り方の説明

・Scratch(スクラッチ)「100%ペンによる動的な三角関数グラフ」作り方の説明

・Scratch(スクラッチ)「日本語サウンドボード」作り方の説明

・Scratch(スクラッチ)「イライラ棒ゲーム (Frustration Game)」作り方の説明

・Scratch(スクラッチ)「蛇ゲーム(Snake Game)」作り方の説明

・Scratch(スクラッチ)「インタラクティブ・ストーリー」作り方の説明

・Scratch(スクラッチ)「ハロウィン脱出ゲーム」作り方の説明

・Scratchプログラミングでsin(サイン)cos(コサイン)を使用する方法

・Scratch(スクラッチ)ビデオモーション機能を使ったゲーム作り方の説明


【Scratch(スクラッチ)コースの紹介動画】

【無料体験コースの詳細について】

・Scratch無料体験コース(小学生以上向け)

・レゴWeDo+ScratchJr無料体験コース(5~7歳幼児向け)