【C# CSS HTML】ドット絵変換ツールを作ってみた

ドット絵変換ツール

おとうぴー

こんにちは!ごっつファーザーのおとうぴー

先日気になるサイトを見つけました。

参考 CSSだけでドット絵マリオを描けるのかクモのようにコツコツと

cssだけでドット絵を描いてるんですよね~。

単純にこれはおもしろい!と、思ったのと、升目が増えたら大変そうだな~とめんどくさがりの自分は思っちゃいました。

ちなみにめんどくさいと思うのは何かを作るチャンスです(笑)。

そうだ、画像を取り込んだらドット絵を作成するツールを作ろう!

ドット絵はhtmlとcssで作ります。完成形は動き(アニメーション)もつけていきたいですね!

おとうぴー

ツール作成

プラグインで作りたかったのですが、とりあえず慣れてる『C# フォーム アプリケーション』で作成することにしました。

①画像選択

ドット絵変換する対象の画像を選択します。

ドット絵変換ツールその1

①ボタンを押すと画像選択画面が開くので、ローカル画像を選択します。(jpg,png,bmp確認済み)

ドット絵変換ツール 画像選択

②画像変換

画像の升目のサイズ(デフォルト10px)を入力して、変換ボタンを押します。

ドット絵変換ツールその2

元の画像の右に、変換したドット絵を表示するようにしました。

まだこの段階では、cssで表示した画像ではありません。

升目サイズ3pxの場合

まだドット絵って感じしませんね。

おとうぴー

升目サイズ5pxの場合

ちょっといい感じになってきました。

おとうぴー

升目サイズ8pxの場合

つぶれ過ぎかどうか微妙なところ。

おとうぴー

升目サイズ10pxの場合

遠めでなんとか分かるかなってとこですかね。

おとうぴー

③WEB表示

WEB表示ボタンを押すと、cssとHTMLで描画します。

最初にも書きましたが、cssとhtmlに関してはこちらのサイトを参考にさせてもらってます。

参考 CSSだけでドット絵マリオを描けるのかクモのようにコツコツと

実際にできたcssでのドット絵

See the Pen bKoZRw by かどまんおとうぴー@ゲームパパブロガー (@kadoman3745) on CodePen.

なかなか綺麗にできました。cssで作っているのでアニメーションもつけたい放題です。

ちょっと簡単にアニメーションつけたのが下画像です。いろいろできそうで楽しみです!

おとうぴー

See the Pen テスト by かどまんおとうぴー@ゲームパパブロガー (@kadoman3745) on CodePen.

MEMO

今回のC#フォームアプリケーションは公開しておりません。

需要があれば公開します。^^

バージョンアップ!アニメーションでつなげるごとに成功

関羽の必殺技を写真で複数選択してつなげてみました。

変更点)複数画像選択可。変換ボタンを押すことでcssでアニメーションとしてつなげる。

See the Pen ごっつ三国 関羽の必殺技紙芝居 by かどまんおとうぴー@ゲームパパブロガー (@kadoman3745) on CodePen.

コメントを残す

メールアドレスが公開されることはありません。