【HTML&CSSではじめるミニゲーム作成の基本】CSSバックグラウンドスライド式のアニメーション用png画像をInkscapeで作成する
※ 当ページには【広告/PR】を含む場合があります。
2021/05/24
2024/01/12
以前、
Html＆CSSは正確な意味ではプログラミング言語ではないのですが、得手のCSSのテクニックを覚えると、非常に単純なミニゲームを作ることが出来るようになります。
CSSゲームもスクラッチゲームも
Html内で画像をどう動かすかという違いはあれど、根本的には同種の技術内で動作するため、ゲーム内で使うリソース画像の作り方は共通する点が多いです。
スクラッチゲームのアニメーションは、HtmlのCanvas要素内でJavascript越しに画像を操作するので、作成するには少し手間がかかります。
対して、CSSゲームはanimation属性からbackgroud画像を簡単に操作する方式で簡単に動かすことが可能です。
今回は、CSSゲーム＆スクラッチゲーム両方で使えるようなアニメーション用png画像をInkscapeで作成する方法を検討してみようと思います。
簡単なCSSパラパラアニメーション
CSSでのパラパラアニメーションの作り方は至ってシンプルです。
まず、横方向もしくは縦方向、どちらでもよいので等間隔に並んだ画像を準備しましょう。
例えば以下は弾むボールをパラパラアニメーションにするための横長の画像です。
735x123
画像さえ準備できれば、下のHTMLフレームのようにCSSでこれをアニメーションにするのはとても簡単です。
ちなみに弾むボールのアニメーションを横並びに速度を変えて、３パターン作成しています。
HTMLコードの中身だけ紹介しておくと、
<div id="css-game-wrapper">
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
</div>
これらの要素に当てたCSSスタイルは以下の通りです。
#css-game-wrapper {
width: 100%;
height: 140px;
background-color: darkgray;
box-sizing: border-box;
position: relative;
}
.ball {
display: block;
position: absolute;
width: 120px;
height: 120px;
overflow: hidden;
background: transparent url("https://raw.githubusercontent.com/tacoskingdom/commonBlogMaterial/main/tacokin-p-school/blog41/article41-example1.png") no-repeat 0 0;
}
#ball-1 {
left: 0px;
top: 0px;
animation: bouncing-ball 0.5s steps(6) 0s infinite;
}
#ball-2 {
left: 120px;
top: 0px;
animation: bouncing-ball 1.5s steps(6) 0s infinite;
}
#ball-3 {
left: 240px;
top: 0px;
animation: bouncing-ball 3s steps(6) 0s infinite;
}
@keyframes bouncing-ball {
to {
background-position: -735px 0;
}
}
以降では、このようなパラパラアニメーションための画像作成手順をじっくり解説していきます。
Inkscapeでベクター画像のパラパラアニメを作る
このブログで何回かSVG画像の作り方を基礎から特集しております。
HTMLゲームもスクラッチアプリを深く・上手に作るためにはSVG画像の理解は欠かすことができません。
SVG形式の画像を扱おうとするとベクター描画系のソフトウェアを使う必要があります。
完全無償で使える
細かい操作方法や機能などは挙げれば切がないので、詳しく知りたい方はぜひ専門書籍などをご参考にして研究してみてください。
それでは以降で具体的なInkscapeを使ったパラパラpngアニメーション作成の手順を説明していきます。
ガイドを作る
おおよその作成手順は
CSSゲームを作る場合、
ここが曖昧だと、ゲーム中で思い通りにはスプライトが働いてくれません。
そもそもInkscapeで連続したアニメーションを作る機能はないので、補助線などのある程度の作図の目標になるものはあらかじめ自分で描く必要があります。
最初にアニメーションの各描画フレームの範囲を目立たせるように、以下のようなガイドになる矩形をInkscapeの
パターンフィル1210x909
まずは四角を使って単位フレームになる図形を作成します。
単位フレームのサイズは作成したいアプリの用途にもよりますが、ここでは幅と高さ
168 x 368 [px]基本図形作成から適当な矩形を作成し、上部のツールボックスから、幅と高さにターゲットの数値をpx単位で入力します。
またフィルで背景として目立ちやすい適当な色を指定しておきます。 この場合、図形の外周のストロークは不要です。
446x462
この単位フレームをコピー＆ペーストして、コピー元と接するようにフレームの高さ分だけ上に移動しましょう。
Inkscapeはデフォルトで移動時に頂点同士を自動で一致させるようにスナップ機能が付いています。
スナップしない場合にはツールバーのYに数値を入力して調整してください。
移動したら、別の背景色でフィルしておきます。
531x568
同じ手法を繰り返して十段重ねになるようにしてみたのが下の図です。
323x652
１０番目の背景色はまた別の色にしておきます。
これは10番目のフレームをカウントしやすいようにマーキングの意味でやってますが、人によってはアニメーションを意識して12フレーム毎に色を変えてみたりと、色々と工夫できると思います。 今回は10フレーム区切りとします。
さて、もちろんこれらのコピペでも十分フレームガイドができるのですが、アニメーションによっては何十、何百ものフレームが必要になるかもしれません。 いちいち数を数えてフレームを重ねていたのでは、その作業だけで時間が奪られてしまいます。
そこで、Inkscapeの
パターンまずはInkscapeのパターンフィルを自作する場合には、パターンの元になるオブジェクトの位置が重要です。 最初にパターンとして認識させた位置がそのまま模様に反映されますので、パターン登録する前にy軸方向(縦方向)の基準がゼロになるように調整します。
363x448
このパターン登録前のオフセットをやっておかないと以下のように上手くフレームガイドとして機能しないはずです。
1186x608
では作成したフレームガイドとして使う10個全て選択し、
[オブジェクト] > [パターン] > [オブジェクトをパターンに]すると、[フィル/ストローク]のダイアログに、以下のようにカスタムパターンが作成されます。
826x930
これで
pattern****では、このパターンフィルを別の矩形に適用させてみましょう。
適当なところで100フレーム分の幅168[px]で高さ
368x100=36800[px][フィル/ストローク]のダイアログにある、
[パターン]892x672
これを背景画像とすることで、どの位置でアニメーションフレームが描画されるのかコマ割りの検討を付けることができるようになります。
フレームごとのアニメーション作成
ここからは実に地道なアニメーションの動画作成を行っていきます。
お絵描きはどうしても個人の力量・作業時間が必要になってくるので、絵の書き方は独自に勉強される必要があります。 また単に絵を描くのと違い、アニメーションにするのにもやはり別の意味で知識が必要です。
最初はここはあまり気負わずに、とにかくどんな絵でもどんなクオリティでもいいので、アニメーションになるように一通り作成してみるのが良いでしょう。
ここからは著者の我流なやり方ですが、Inkscapeで便利だなと思った基本的な描画方法だけピックアップして紹介しておきます。
曲線の作成
Inkscapeで思い通り曲線を描くのは慣れが必要で、個人的にはペンツールを使っていきます。
描きたい曲線を頭に思い描きながら当たりを多角形で作成します。
525x427
次にノードツールで修正したい頂点(ノード)を選択し、SHIFTキーを押しながらで引っ張ることで、べシェ曲線のハンドルを引き出すことができます。
1434x723
各ノードで曲線の曲げ具合を調整しながら作図していくスタイルになります。
ノードとベシェハンドルによる作図では、ノードの種類の切り替えを理解しておく必要があります。
基本は以下の図に示すとおり、菱形ノードと四角ノードを適宜切り替えて図形を修正していきます。
ノード位置で対称性が欲しい場合や形をリセットしたい場合には四角ノード(対称モード)や丸ノードを使うときもあります。
788x734
位置の調整
上の節でも何度か出ましたが、ノードや図形の位置調整にはツールボックスを使うとより正確に作図できると思います。
944x498
Inkscapeでパラパラアニメーションのフレーム内で座標を調整するときには、ツールボックスでの座標入力は欠かせないものになります。
ベクター画像をコピペできる利点
ベクター画像として一度描いてしまうと後で如何様にも変形して修正できるので、例えばRPGなどのスプライト用のキャラクターチップなどの比較的小規模なアニメーション作成には効率的に作業できます。
また、絵の境界線の太さなどでもデフォルメ感などの大分印象が違うので、ベクター画像なら即時オリジナルの画像をコピーして線を調整することでゲームに採用する画像を吟味しながらピックアップできます。
1005x357
png画像へのエクスポート
とりあえず本題に戻して、アニメーションを作成するフレームガイドに一コマずつ絵を描いていきます。
当然ながらこの作業が一番苦労するでしょう。 出来る限りコピペで済ませられるフレームはコピペで絵を描いていきます。
パラパラアニメーションになるようにある程度完成したら、一枚のpng画像として吐き出すことで、CSSゲームやスクラッチゲームに利用すうことができます。
ガイドにしていた背景画像を
[フィル/ストローク]不透明度940x810
この背景を選択した状態を維持しながら、
[PNG画像にエクスポート]選択範囲846x543
するとエクスポートの設定範囲が適切に狙ったサイズになっていると思います。 これで厳密にピクセル単位で操作できるズレのないcss操作が可能になります。
あとはお好きな出力画像サイズを入力すると、アニメーション用のPNG画像が完成します。
もしエクスポートしても何も表示されていないなら、エクスポート設定で
選択されていないものは出力しないこれでだいたいの簡単なパラパラアニメーション用のPNG画像が作れると思います。
今回戯れに作成した画像をエクスポートした例を、
CSSアニメーションの実行
ついでにですが、以下は簡単に動くようにしてみたCSSアニメーションです。
なお、アニメーションのスタートはマウスクリックでトリガーするようにしています。
このテクニックについては、別ブログの以下のパートで詳しく解説しています。
<div id="css-game-wrapper">
<div class="box-game" id="box">
<label for='checkbox'></label>
<input type='checkbox' id='checkbox'>
<div class="box-game-inner"></div>
</div>
</div>
これには以下のCSSスタイルを適用させています。
#css-game-wrapper {
width: 100%;
height: 300px;
background-color: darkgray;
box-sizing: border-box;
position: relative;
}
#css-game-wrapper .box-game {
position: absolute;
width: 96px;
height: 192px;
overflow: hidden;
}
#css-game-wrapper .box-game label {
display: block;
position: absolute;
bottom: 0px;
left: 1px;
width: 94px;
height: 63px;
z-index: 1;
}
#css-game-wrapper .box-game input {
display: none;
}
#css-game-wrapper #box {
display: block;
left: 50px;
bottom: 12px;
}
#css-game-wrapper #box .box-game-inner {
position: absolute;
display: block;
width: 96px;
height: 192px;
overflow: hidden;
background: transparent url("https://raw.githubusercontent.com/tacoskingdom/commonBlogMaterial/main/tacokin-p-school/blog41/tacoani_m.png") no-repeat 0 0;
background-size: auto;
background-size: 96px 13056px;
}
#css-game-wrapper #box #checkbox:checked ~ .box-game-inner {
animation: sprite-taco 9s steps(67) 0s forwards;
}
@keyframes sprite-taco {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -12864px;
}
}
実際にやってみますと、壺をクリックすることでアニメーションが動作することが分かります。
まとめ
以上、著者がInkscapeを使って簡単なパラパラPNGアニメーションを作る際に行っている工程をダイジェストで解説してみました。
今回はInkscapeの基礎的な機能だけを使っておりますが、まだまだ便利な機能やエクステンションも多数眠っているので、是非ともご自身の手でより効率の良い作図方法を発見して行かれてみてはどうでしょうか。