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

※ 当ページには【広告/PR】を含む場合があります。

2021/05/24

2024/01/12

【HTML&CSSではじめるミニゲーム作成の基本】スプライトの接触判定をじっくり理解しよう

以前、

こちら

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

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

CSSゲームもスクラッチゲームも

「スプライト用の画像を作る」工程

は共通しています。

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

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

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

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

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

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

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

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

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

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

画像さえ準備できれば、下の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;
  }
}

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

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

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

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

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

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

【Scratch入門】SVG画像のviewportの意味とviewBox属性の使い方

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

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

完全無償で使える

『Inkscape』

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

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

それでは以降で具体的な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

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

【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;
  }
}