【HTML&CSSではじめるミニゲーム作成の基本】CSSバックグラウンドスライド式のアニメーション用png画像をInkscapeで作成する


※ 当ページには【広告/PR】を含む場合があります。
2021/05/24
2024/01/12
【HTML&CSSではじめるミニゲーム作成の基本】スプライトの接触判定をじっくり理解しよう
合同会社タコスキングダム|TacosKingdom,LLC.

以前、
こちらの別ブログで簡単なCSSゲームを作るテクニックの基礎を紹介しておりました。

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

CSSゲームもスクラッチゲームも
「スプライト用の画像を作る」工程は共通しています。

Html内で画像をどう動かすかという違いはあれど、根本的には同種の技術内で動作するため、ゲーム内で使うリソース画像の作り方は共通する点が多いです。

スクラッチゲームのアニメーションは、HtmlのCanvas要素内でJavascript越しに画像を操作するので、作成するには少し手間がかかります。

対して、CSSゲームはanimation属性からbackgroud画像を簡単に操作する方式で簡単に動かすことが可能です。

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


合同会社タコスキングダム|タコキンのPスクール【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

すぐに作れる ずっと使える Inkscapeのすべてが身に付く本

簡単なCSSパラパラアニメーション

CSSでのパラパラアニメーションの作り方は至ってシンプルです。

まず、横方向もしくは縦方向、どちらでもよいので等間隔に並んだ画像を準備しましょう。

例えば以下は弾むボールをパラパラアニメーションにするための横長の画像です。

合同会社タコスキングダム|タコキンのPスクール

画像さえ準備できれば、下のHTMLフレームのようにCSSでこれをアニメーションにするのはとても簡単です。

ちなみに弾むボールのアニメーションを横並びに速度を変えて、3パターン作成しています。

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;
  }
}
        
以降では、このようなパラパラアニメーションための画像作成手順をじっくり解説していきます。


合同会社タコスキングダム|タコキンのPスクール【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

すぐに作れる ずっと使える Inkscapeのすべてが身に付く本

Inkscapeでベクター画像のパラパラアニメを作る

このブログで何回かSVG画像の作り方を基礎から特集しております。

HTMLゲームもスクラッチアプリを深く・上手に作るためにはSVG画像の理解は欠かすことができません。

合同会社タコスキングダム|タコキンのPスクール
【Scratch入門】SVG画像のviewportの意味とviewBox属性の使い方

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

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

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

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

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

ガイドを作る

おおよその作成手順はこちらの記事でも解説しています。

CSSゲームを作る場合、
「画像サイズ(とりわけ画像フレームのサイズ)」の理解がとても重要です。

ここが曖昧だと、ゲーム中で思い通りにはスプライトが働いてくれません。

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

最初にアニメーションの各描画フレームの範囲を目立たせるように、以下のようなガイドになる矩形をInkscapeの
パターンフィル機能を使って作成してみましょう。

合同会社タコスキングダム|タコキンのPスクール

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

単位フレームのサイズは作成したいアプリの用途にもよりますが、ここでは幅と高さ
168 x 368 [px]の四角のエリアを例にとります。

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

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

合同会社タコスキングダム|タコキンのPスクール

この単位フレームをコピー&ペーストして、コピー元と接するようにフレームの高さ分だけ上に移動しましょう。

Inkscapeはデフォルトで移動時に頂点同士を自動で一致させるようにスナップ機能が付いています。

スナップしない場合にはツールバーのYに数値を入力して調整してください。

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

合同会社タコスキングダム|タコキンのPスクール

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

合同会社タコスキングダム|タコキンのPスクール

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

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

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

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

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

合同会社タコスキングダム|タコキンのPスクール

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

合同会社タコスキングダム|タコキンのPスクール

では作成したフレームガイドとして使う10個全て選択し、
[オブジェクト] > [パターン] > [オブジェクトをパターンに]を選択します。

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

合同会社タコスキングダム|タコキンのPスクール

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

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

適当なところで100フレーム分の幅168[px]で高さ
368x100=36800[px]の矩形を作成し、さらにy座標もゼロに設定しておきます。

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

合同会社タコスキングダム|タコキンのPスクール

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

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

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

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

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

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

曲線の作成

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

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

合同会社タコスキングダム|タコキンのPスクール

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

合同会社タコスキングダム|タコキンのPスクール

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

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

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

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

合同会社タコスキングダム|タコキンのPスクール

位置の調整

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

合同会社タコスキングダム|タコキンのPスクール

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

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

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

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

合同会社タコスキングダム|タコキンのPスクール

png画像へのエクスポート

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

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

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

ガイドにしていた背景画像を
[フィル/ストローク]ダイアログから不透明度をゼロにして、一時的に透明かします。

合同会社タコスキングダム|タコキンのPスクール

この背景を選択した状態を維持しながら、
[PNG画像にエクスポート]のダイアログでエクスポート領域から選択範囲を選択します。

合同会社タコスキングダム|タコキンのPスクール

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

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

もしエクスポートしても何も表示されていないなら、エクスポート設定で
選択されていないものは出力しないのオプションにチェックが入ったままでないかを確認してください。

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

今回戯れに作成した画像をエクスポートした例を、
当ブログのgithubに置いておきますのでどんな画像になっているかはそちらをご参考ください。


合同会社タコスキングダム|タコキンのPスクール【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

すぐに作れる ずっと使える Inkscapeのすべてが身に付く本

CSSアニメーションの実行

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

なお、アニメーションのスタートはマウスクリックでトリガーするようにしています。

このテクニックについては、別ブログの以下のパートで詳しく解説しています。

参考|【Sassで解説】ヤマト運輸HPの404エラーページのミニゲームはほぼ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;
  }
}
        
実際にやってみますと、壺をクリックすることでアニメーションが動作することが分かります。


合同会社タコスキングダム|タコキンのPスクール【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

すぐに作れる ずっと使える Inkscapeのすべてが身に付く本

まとめ

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

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

合同会社タコスキングダム|タコキンのPスクール【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

すぐに作れる ずっと使える Inkscapeのすべてが身に付く本

参考サイト

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

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

CSSアニメーションでつくるパラパラ漫画アニメーション