あっぷりノート

Fix the Bits | あっぷり工房

旅、ギア、サプリ、マインド、トレーニング ── “走る”は創れる

#29 JavaScriptでアクションゲームを作る │ ラスボスを一部公開【GIFアニメ付き】

走れない代わりに、走るゲームを創るプロジェクト、第29回。


今回は

ラスボスの一部
をGIFアニメで公開してみる。


小出しにしていくことで、自分自身にも発破をかけ、すこしでも皆さんの脳内フックになればと思う。

本日の成果物

f:id:you_key69:20220319225345g:plain

肉片が弾丸のように飛んでくるぞ。

避けまくれ!避けまくるんだ!

本日のGIFアニメ

今回は開発中の動きが伝わるようにGIFアニメを作ってみた。

GIFアニメとは

GIFアニメとは

画像ファイルにもかかわらず、簡易的なアニメーションを表現することができてしまう優秀なファイル形式のこと
である。

GIFアニメの作り方

作り方は以下のとおり。

  • 録画(Xbox Game Bar)
  • クロップ(Online Video Cutter)
  • GIFアニメ化(ラッコツールズ)
  • アップロード(はてなブログ)

参考までに詳述したい。

録画(Xbox Game Bar)

f:id:you_key69:20220320094016j:plain

画面の録画は、Windows10以降、標準で搭載されている「Xbox Game Bar」を使う。

Win+G」のショートカットキーですぐに起動できるので重宝する。


※スマホの場合は「AZ Screen Recorder」がオススメです

クロップ(Online Video Cutter)

録画ではブラウザの枠やムダな余白まで映ってしまうので、部分的にくり抜いて必要な画面だけ残す必要がある。

そのために「クロップ(切り抜き)」ができるツールを探そう。


PCにインストール不要なオンラインツールを使うといい。

今回は「Online Video Cutter」の世話になった。


※ちなみにスマホ版の「AZ Screen Recorder」はクロップまでできる優れものです

GIFアニメ化(ラッコツールズ)

f:id:you_key69:20220319225654j:plain

いよいよ切り抜いた動画をGIF化する。

今回使ったのはラッコツールズ「動画をGIFに変換」だ。


コチラもオンラインツールである。

今は動画をGIF化するWebアプリがたくさんあるので、使いやすいものを選べばいいだろう。

アップロード(はてなブログ)

はてなブログへの投稿方法は、GIFファイルを編集画面にドラッグ&ドロップするだけ。

10MBを超えるようなファイルはダメらしいので、高画質で長ったらしいGIFファイルはダメだけどね。


ちなみに今回載せたGIFファイルは1MB程度である。

本日のドット絵

f:id:you_key69:20220319225640j:plain

ロックマンファンであればお気づきかもしれない。

“アノお方”の肉片である。


またまたYouTubeの動画を拡大しながらドットを打ったのであってるかは怪しいが、回転させて飛ばせば多少まちがっててもさほど気にならないだろう。

今後の展望

ラスボスの構想はだいたいできてきた。

あとは己のスキル気合いの問題である。


走る、を創ろう。