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

2025/06/07

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

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

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

サンプル

使い方

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

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

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

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

　赤い横線で上下に分割しますので、オリジナル画像をタップやクリックして位置を決めてください。 「分割位置」の数値でも調整できます。
　プレビューボタンを押下して、「速度倍率」や「移動方向」を増減させて良い具合に調整してください。 上部は「秒数」で一周しますので、上部の速度は「秒数」で調整してください。
　好みに応じて「ファイル名」も変更してください。 フレームレートは初期値のままで問題ありませんが、必要に応じて変更してください。

3.mp4保存

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

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

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

プライバシーと安全性

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

技術解説

　本記事の技術は、現代の技術でシェーダーを使用して実現しています。
　この元になった技術は、ファミコン世代のゲームで奥行き感の表現に使用された、多重スクロールです。

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

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

縦位置ごとに横スクロール速度の変更は容易

　縦の指定位置で、背景画像の横の位置を変更するのは、当時から比較的容易でした。 理由などの詳細はこの記事の「横うねうね演出と家庭用ゲーム機の変遷」をご参照ください。
　つまり、本記事のように、1枚の背景画像を、縦の指定位置の横線で区切り、横スクロール速度を変更することは、比較的容易に実現できます。 そのテクニックを用いて、上部をゆっくり、下部を速く動かすことで、奥行きが表現できます。

多重スクロールを駆使した横スクロールゲーム

　このテクニックは比較的容易ではありましたが、きれいに見えるようにするには、相当な苦労がありました。 当時の各ゲームが、色々と工夫されていたと思います。
　そんな中で筆者は、PCエンジンの横スクロールシューティングゲーム[PR]『マジカルチェイス』を推します。
　このゲームは、筆者が確認しただけでも、4重スクロールを実現しています。 本記事で紹介した以外に、透明背景の色替えや、スプライトと呼ばれる通常キャラクターを表現する機能を組み合わせたテクニックを駆使していて、その絵もとてもきれいです。 当時これらの技術力に、とても感動しました。
　余談ですが、筆者はその後、株式会社スクウェア(当時)に転職しました。 するとなんと、『マジカルチェイス』を作られた方も転職されていて、仕事をご一緒させていただく機会があり、さらに感動した、というエピソードがあります。

縦スクロールゲームでも応用可能

　同様のテクニックは、縦スクロールゲームでも応用が可能です。 筆者がメインプログラマーとして開発した、縦スクロールシューティングゲーム[PR]『ソルジャーブレイド』でも、色々と工夫しています。
　縦位置ごとに、背景画像の縦の位置も容易に変更できるので、それを駆使して演出しています。 細かく解説してしまうと、社外秘に触れてしまいそうですが、これくらいなら大丈夫でしょう。 あるいは、もう古い技術ですし、時効という気もします。

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

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

まとめ

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

補足