【Html&CSSゲーム作成】CSSバックグラウンドスライド式のアニメーション用pngをInkscapeで作成する方法

2021/05/24

2022/08/14

【Scratch入門】SVG画像をScratchステージの背景として使う〜 viewportの意味とviewBox属性の使い方

以前、

こちらの別ブログ

で簡単なCSSゲームを作るテクニックの基礎を考えてみる記事をポストしたことがあります。

Html＆CSSは正確な意味ではプログラミング言語ではないのですが、得手のCSSのテクニックを覚えると、非常に単純なミニゲームを作ることが出来るようになります。

そんなCSSゲームとスクラッチで作るゲームの共通点としてあげたいのが、「スプライト用の画像を作る」工程です。

スクラッチは基本的にHtmlのCanvas要素内でJavascript越しに画像を操作するのに対し、CSSゲームはanimation属性でbackgroud画像を簡単に操作する方式で動いてます。Html内で画像をどう動かすかという違いはあれど、根本的には同種の技術内で動作するため、ゲーム内で使うリソース画像の作り方は共通する点が多いです。

今回は、CSSゲーム＆スクラッチゲーム両方で使えるようなアニメーション用png画像をInkscapeで作成する方法を検討してみようと思います。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

ベクター画像でパラパラアニメを作る意義

このブログで何回かSVG画像の作り方を基礎から特集しておりますが、スクラッチアプリを深く・上手に作るためにはSVG画像の理解は欠かすことができません。

【Scratch入門】SVG画像をScratchステージの背景として使う〜 viewportの意味とviewBox属性の使い方

ScratchにおけるSVG画像で重要なビューポート(Viewport)の概念と使い方の基本を説明します。

SVG形式の画像を扱おうとするとベクター描画系のソフトウェアを使う必要があります。

完全無償で使える

Inkscape

は現在、Windows/MacOSX/Linuxに対応しているので、使い方を覚えるとこれ一つで個人作成のゲームに使う画像リソースなどは十分描くことが可能です。

細かい操作方法や機能などは挙げれば切がないので、詳しく知りたい方はぜひ専門書籍などをご参考にして研究してみてください。

Inkscapeでイラストを作るすぐに作れるずっと使える Inkscapeのすべてが身に付く本

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

Inkscapeでの作業手順

それでは以降で具体的なInkscapeを使ったパラパラpngアニメーション作成の手順を説明していきます。

ガイドを作る

こちらの記事

でも解説していましたが、CSSゲームを作る場合、もっとも気を使わなければならないのは画像サイズ(とりわけ画像フレームのサイズ)です。ここが曖昧だと、ゲーム中で上手くスプライトが働いてくれません。

そもそもInkscapeで連続したアニメーションを作る機能はないので、補助線などのある程度の作図の目標になるものはあらかじめ自分で描く必要があります。

最初にアニメーションの各描画フレームの範囲を目立たせるように、以下のようなガイドになる矩形をInkscapeの

パターンフィル

機能を使って作成してみましょう。

まずは四角を使って単位フレームになる図形を作成します。

単位フレームのサイズは作成したいアプリの用途にもよりますが、ここでは

168 x 368 [px]

の四角のエリアを例にとります。基本図形作成から適当な矩形を作成し、上部のツールボックスから、幅と高さにターゲットの数値をpx単位で入力します。

またフィルで背景として目立ちやすい適当な色を指定しておきます。この場合、図形の外周のストロークは不要です。

この単位フレームをコピー＆ペーストして、コピー元と接するようにフレームの高さ分だけ上に移動しましょう。Inkscapeはデフォルトで移動時に頂点同士を自動で一致させるようにスナップ機能が付いていますが、スナップしない場合にはツールバーのYに数値を入力して調整してください。

移動したら、別の背景色でフィルしておきます。

同じ手法を繰り返して十段重ねになるようにしてみたのが下の図です。

１０番目の背景色はまた別の色にしておきます。

これは10番目のフレームをカウントしやすいようにマーキングの意味でやってますが、人によってはアニメーションを意識して12フレーム毎に色を変えてみたりと、色々と工夫できると思います。今回は10フレーム区切りとします。

さて、もちろんこれらのコピペでも十分フレームガイドができるのですが、アニメーションによっては何十、何百ものフレームが必要になるかもしれません。いちいち数を数えてフレームを重ねていたのでは、その作業だけで時間が奪られてしまいます。

そこで、Inkscapeの

パターン

でこの10段に重ねた四角をパターンとして利用し、再利用性の高いアニメーション用のフレームガイドを作ります。

まずはInkscapeのパターンフィルを自作する場合には、パターンの元になるオブジェクトの位置が重要です。最初にパターンとして認識させた位置がそのまま模様に反映されますので、パターン登録する前にy軸方向(縦方向)の基準がゼロになるように調整します。

このパターン登録前のオフセットをやっておかないと以下のように上手くフレームガイドとして機能しないはずです。

では作成したフレームガイドとして使う10個全て選択し、

[オブジェクト] > [パターン] > [オブジェクトをパターンに]

を選択します。すると、[フィル/ストローク]のダイアログに、以下のようにカスタムパターンが作成されます。

これで

pattern****

という名前のパターンテクスチャが利用できるようになりました。

では、このパターンフィルを別の矩形に適用させてみましょう。

適当なところで100フレーム分の幅168[px]で高さ

368x100=36800[px]

の矩形を作成し、さらにy座標もゼロに設定しておきます。

[フィル/ストローク]のダイアログにある、

[パターン]

のボタンを押し、先ほど新規登録されたカスタムパターンを選択します。すると、以下のようにフレームガイドが任意の高さで生成されることが分かると思います。

これを背景画像とすることで、どの位置でアニメーションフレームが描画されるのかコマ割りの検討を付けることができるようになります。

フレームごとのアニメーション作成

ここからは実に地道なアニメーションの動画作成を行っていきます。

お絵描きはどうしても個人の力量・作業時間が必要になってくるので、絵の書き方は独自に勉強される必要があります。また単に絵を描くのと違い、アニメーションにするのにもやはり別の意味で知識が必要です。

最初はここはあまり気負わずに、とにかくどんな絵でもどんなクオリティでもいいので、アニメーションになるように一通り作成してみるのが良いでしょう。

ここからは著者の我流なやり方ですが、Inkscapeで便利だなと思った基本的な描画方法だけピックアップして紹介しておきます。

曲線の作成

Inkscapeで思い通り曲線を描くのは慣れが必要で、個人的にはペンツールを使っていきます。

描きたい曲線を頭に思い描きながら当たりを多角形で作成します。

次にノードツールで修正したい頂点(ノード)を選択し、SHIFTキーを押しながらで引っ張ることで、べシェ曲線のハンドルを引き出すことができます。

各ノードで曲線の曲げ具合を調整しながら作図していくスタイルになります。

ノードとベシェハンドルによる作図では、ノードの種類の切り替えを理解しておく必要があります。

基本は以下の図に示すとおり、菱形ノードと四角ノードを適宜切り替えて図形を修正していきます。

ノード位置で対称性が欲しい場合や形をリセットしたい場合には四角ノード(対称モード)や丸ノードを使うときもあります。

位置の調整

上の節でも何度か出ましたが、ノードや図形の位置調整にはツールボックスを使うとより正確に作図できると思います。

Inkscapeでパラパラアニメーションのフレーム内で座標を調整するときには、ツールボックスでの座標入力は欠かせないものになります。

ベクター画像をコピペできる利点

ベクター画像として一度描いてしまうと後で如何様にも変形して修正できるので、例えばRPGなどのスプライト用のキャラクターチップなどの比較的小規模なアニメーション作成には効率的に作業できます。

また、絵の境界線の太さなどでもデフォルメ感などの大分印象が違うので、ベクター画像なら即時オリジナルの画像をコピーして線を調整することでゲームに採用する画像を吟味しながらピックアップできます。

png画像へのエクスポート

とりあえず本題に戻して、アニメーションを作成するフレームガイドに一コマずつ絵を描いていきます。

当然ながらこの作業が一番苦労するでしょう。出来る限りコピペで済ませられるフレームはコピペで絵を描いていきます。

パラパラアニメーションになるようにある程度完成したら、一枚のpng画像として吐き出すことで、CSSゲームやスクラッチゲームに利用すうことができます。

ガイドにしていた背景画像を

[フィル/ストローク]

ダイアログから

不透明度

をゼロにして、一時的に透明かします。

この背景を選択した状態を維持しながら、

[PNG画像にエクスポート]

のダイアログでエクスポート領域から

選択範囲

を選択します。

するとエクスポートの設定範囲が適切に狙ったサイズになっていると思います。これで厳密にピクセル単位で操作できるズレのないcss操作が可能になります。

あとはお好きな出力画像サイズを入力すると、アニメーション用のPNG画像が完成します。

もしエクスポートしても何も表示されていないなら、エクスポート設定で

選択されていないものは出力しない

のオプションにチェックが入ったままでないかを確認してください。

これでだいたいの簡単なパラパラアニメーション用のPNG画像が作れると思います。

今回戯れに作成した画像をエクスポートした例を、

当ブログのgithub

に置いておきますのでどんな画像になっているかはそちらをご参考ください。

Inkscapeでイラストを作るすぐに作れるずっと使える Inkscapeのすべてが身に付く本

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

CSSアニメーションの実行

ついでにですが、以下は簡単に動くようにしてみたCSSアニメーションです。

壺をクリックするとアニメーションが開始できます。

Inkscapeでイラストを作るすぐに作れるずっと使える Inkscapeのすべてが身に付く本

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

まとめ

以上、著者がInkscapeを使って簡単なパラパラPNGアニメーションを作る際に行っている工程をダイジェストで解説してみました。

今回はInkscapeの基礎的な機能だけを使っておりますが、まだまだ便利な機能やエクステンションも多数眠っているので、是非ともご自身の手でより効率の良い作図方法を発見して行かれてみてはどうでしょうか。

参考サイト

【CSS】スプライト画像をstepsでアニメーションさせる方法・作り方

フィル＆ストロークを極める - パターン

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選