多重縦スクロール【mp4クリエイター】

2025/06/08

　gifアニメや静止画を、指定された位置で左右に区切り、速度を変えて縦スクロールさせる加工を行い、mp4動画ファイルを生成するWebアプリケーションです。 ファミコン世代のゲームで用いられていた演出を、現代の技術で再現しました。渓谷の奥行き感が出せます。 その技術解説も添えています。

プログラミングブログ記事一覧

多重横スクロール動画ファイルクリエイター

サンプル

自然系画像

タイル状配置画像

タイル状配置画像(無段階)

使い方

1. 「読み込み画像ファイル」で画像ファイルを読み込みます
2. 分割位置(赤線)と各種パラメーターを設定・調整します
3. 【mp4保存】ボタンを押下し、OKを押します
4. mp4ファイルがダウンロードされれば成功です

1.画像ファイル読み込み

　「読み込み画像ファイル」のところで、【参照】(【ファイル選択】)ボタンから画像ファイルを選択するか、画像ファイルをドラッグ＆ドロップしてください。

2.プレビューとパラメーター調整

　赤い横線で左右に分割します。 左右対称で、2箇所を指定します。 オリジナル画像をタップやクリックすることで、内側→外側の順に区切り位置を指定できます。 「分割位置1」「分割位置2」の数値でも調整できます。
　「無段階」にチェックをすると、分割位置は無視して、滑らかにスクロール速度を変化させます。 この場合、一周しても画像は元に戻りませんので、ループの区切りが明確になります。 ご了承ください。
　プレビューボタンを押下して、「速度倍率」を増減させて良い具合に調整してください。 上部は「秒数」で一周しますので、上部の速度は「秒数」で調整してください。
　好みに応じて「ファイル名」も変更してください。 フレームレートは初期値のままで問題ありませんが、必要に応じて変更してください。

3.mp4保存

　【mp4保存】ボタンを押下し、確認ダイアログを確認してOKを押してください。
　なお【gifアニメ保存】ボタン押下で、mp4ファイルの代わりに、gifアニメーションファイルを生成できます。

4.ファイルダウンロード確認

　mp4ファイル(またはgifファイル)がダウンロードできていれば成功です。
　Webブラウザーの設定にもよりますが、通常は「ダウンロード」フォルダに保存されます。 ファイルアプリ、ファイルマネージャーアプリなどからアクセスしてください。 そこから写真/フォト/ビデオ/ギャラリーフォルダなどへの移動もできます。

プライバシーと安全性

　お使いの端末のみで処理されますので、読み込み指定された画像や生成されたファイルが他に漏れることはありません。

技術解説

　本記事の技術は、現代の技術でシェーダーを使用し、ピクセル位置を、分割位置を考慮して速度を変えて、縦にスクロールさせることで実現しています。
　ファミコン世代のゲーム機でも、本記事とは別のテクニックを用いて、同様に縦方向の多重スクロールが実現できました。 以下に解説します。

背景用画像1枚で奥行き感を表現

　現代のゲーム機ならば、3Dの技術を用いれば、自然に奥行き感が出せます。
　しかしファミコン世代のゲームでは、2Dで、画面全体の背景に使える画像は1枚だけという制約の中で、表現する必要がありました。
　そこで考案されたのが多重スクロール技術です。 遠くゆっくり、近くは速く動かすことで、例えば実際の渓谷と同じような遠近感を作り出していました。

ラスタースクロールは水平分割のみ

　横スクロールならば、この記事やこの記事でも紹介した通り、 ラスタースクロールというテクニックが使えます。
　しかし、ラスタースクロールは水平分割のテクニックのため、縦スクロールには使えません。 別の工夫が必要です。

背景はタイル状に配置

　当時の背景画像は、キャラと呼ばれる \(8 \times 8\) ピクセルの画像を、タイル状に配置する形式でした。 ファミコン世代のゲームの背景は、同じパターンの繰り返しが多かったと思いますが、これが原因のひとつです。
　ただ、この特性だったからこそ、縦の多重スクロールが実現できました。

キャラ画像をスクロール

　この図のように、縦方向に同じキャラがタイル状に配置されている画像に対して、その元となるキャラの画像を変更します。
　すると、画面全体の配置情報を変更しなくても、自動的に、そのキャラを利用している部分の背景画像が変わります。 縦方向に同じキャラが並んでいるキャラを、1ピクセル下にずらすと、その縦に並んでいる箇所全体が下に1ピクセルスクロールして見えます。
　当時はこれを、キャラスクロールなどと呼んでいたと思います。

テクスチャuvスクロールアニメーション

　今風に言えば、テクスチャuvスクロールアニメーションです。
　3Dゲームでは、一般的に ポリゴン を動かして、アニメーションを表現します。
　しかしテクスチャuvスクロールアニメーションでは、ポリゴンを動かすのではなく、貼り付けられている テクスチャのuv値すなわち貼り付け位置を変更することで、ポリゴンに貼られている絵が変化して、 部分的なスクロールを実現できます。

原理的には同じ

　当時のキャラスクロールアニメーションと、テクスチャuvスクロールアニメーションは、原理的には同じです。
　ただし、現在のテクスチャuvスクロールアニメーションでは、本記事のように画像は自由ですが、 キャラスクロールでは、このサンプルのように、縦に繰り返されている画像に対してのみ、多重縦スクロールが表現ができます。

優秀なグラフィックデザイナーがいてこそ

　これらは、優秀なグラフィックデザイナーがいてこそ、実現できるものです。 グラフィックデザイナーから実現方法を提案されることも、頻繁にありました。
　これらのテクニックを使うためには、厳密な制約の中で絵を描く必要があり、絵が上手いだけでは不足です。 ハードウェアの特性を理解した工夫が求められます。

まとめ

　本記事では、gifアニメや静止画を、速度を変えて縦スクロールさせる加工を行い、mp4動画ファイルを生成するアプリケーションを公開し、 その使用方法を解説しました。
　ファミコン世代のゲームで使用されていたテクニックと、現在に通じる技術についても、解説しています。
　また、mp4クリエイターの他バリエーションをこの記事にまとめていますので、よろしければそちらもご活用ください。

補足