【自作ツール配布】2Dゲームのマップを簡単に作る話

こんばんは。てんたこソフトです！

今回は自作ツールの紹介と前の記事で言っていた「オートタイル」に関する記事です。

自作ツールの紹介

マップチップに関する少し便利な機能を乗せたツールになります。
このツールはオフラインツールなので、ネット接続の有無関係なく利用できます。
主に、

• アクションゲーム用のオートタイル画像の生成(Godot Engine向け)
• 14種類のマップチップから49種類のマップチップの生成
• シングルタイルのプレビュー

の3種類です。
よく分からないと思うので、gif画像付きで紹介します！

オートタイル画像の生成(Godot Engine向け)

サンプル画像と同じ書式の画像をアップロードして、読み込む1タイルの大きさを指定してあげて下さい。
1タイルの大きさを32pxにした場合、アップロードされた画像から32x32で読み込み、画像を生成します。

参考画像は64x64を基準としているので、タイルの大きさも64x64です。
実践記事は本記事のフォロー限定記事で書くので分かりにくい場合はそちらをご覧ください。

【type: 14】AutoTile Templater

14種類の画像からオートタイル画像を生成します。

【type: 49】AutoTile Templater

49種類の画像からオートタイル画像を生成します。

マップチップの生成(14 to 49)

石畳のマップチップは1、2種類だけでは済みませんよね。
石畳同士の結合パターンを描かなければなので。

このツールは、左上角のパーツを作ったら「右上角・右下角・左下角」を生成してくれるようなツールとなっています。

【type: 14】MapChip Maker

サンプルの書式に従った14種のタイル画像をアップロードすると、他の必要なパーツを補填した画像を生成します。

シングルタイルのプレビュー

このタイルを並べたら自然につながるのかな～？と思った時に使えるツールです。
150x150より大きいと上手くいかないかもしれません。必要になったら拡張します。

【type: 14】MapChip Previewer

※【type: 14】とありますが全く関係ありません。消し忘れです。
シングルタイルを繋げて表示するツールです。一応繋げた画像をダウンロードできます。
1タイルの大きさはアップロードされた画像に応じて自動で設定されるので、いじらなくて大丈夫です。

配布について

フォロー記事(無料)にて配布します。
DLした方は、readme.txtを一読して下さい。

おわりに

話は変わりまして実は今日Twitterを開設しました。

こちらですね。

開発に詰まっているけど記事にするほどでもない、でもなんだか吐き出したい！
そういう時に使うことにしました！

ゲームの進捗は基本Twitterでは発信しません。
Ci-enの特典なのでゲームの進捗はここで発信していきます！

当然、えっちな画像もTwitterではあげません。
代わりにCi-en記事の投稿がお知らせツイートされます(多分)。

「今何に詰まってるのかな？」「どんな人なのかな」等興味がある方はフォローしてやって下さい。

使い方がまだ分かっていないのでお知らせミスがあったらすみません！

【自作ツール進捗】マップチップ生成ツールが動作版まで完成した話

こんばんは。てんたこソフトです！

ずっと開発していたツールがやっと動作版まで完成しました。
今回はそんなお話です。

動作版とは？完成じゃないの？

本当に必要最低限の機能しか設定していないので、ビジュアル面が非常にお粗末になっております。そういう意味では完成してません。

が、ゲーム制作に打ち込み始めたいのでとりあえずツール開発はお休みします。

なんの話か分からない方はこの記事を読んでいただければと思います。

最終的に機能はどうなったの？

• 49種類のマップチップからオートタイル用のテンプレート画像を生成
• 14種類のマップチップからオートタイル用のテンプレート画像を生成

の2種類の機能になりました。

実用的なのは14種類の方です。
どんな種類分けかというとこんな分け方です。

大分コンパクトになりましたね。
文字で列挙すると

• 左上角(内側壁無し)
• 下向きT字通路
• 左上角(内側壁有り)
• 左上通路、右・右下・下接続部
• 壁(8方向接続部)
• 4方通路(接続部は上下左右のみ)
• 7方向接続部(左上壁)
• 6方向接続部(左上左下壁)
• 5方向接続部(左上左下右上壁)
• 斜め通路(左上)
• 片側壁(上部のみ壁)
• 突起(左)
• 通路(横)
• 単体(接続部無し)

となります。
この14種類なら単調すぎないデザインもできる上に、労力も最低限でいいんじゃないでしょうか？

3種類と4種類のものは未実装です。
面倒な上にトリッキーな使い方になるので......
自分が欲しくなった時か要望がある時に作りたいと思います！

配布はするの？

次回の記事で配布予定です。
フォローユーザーのみツールをダウンロードできるようにします。
動作テストはgoogle chromeでのみ行っています。
他のブラウザで動くかは分かりません(IE以外なら動くと思います)。

おわりに

完成したぞーーーーっ！！！

なかなか大変でした。約一カ月かかってしまいましたね。
このくらいのツールを作るのに一カ月か～、と自分の技術力を把握できて良かったです。

実際に書いたプログラムは約900行程度です。どうなんですかね、この文量。
ツクール系のスクリプト書いてる人はもっと書いてるんでしょうね、きっと。
先人様はすごいなぁ(尊敬の眼差し)。

このペースだとアクションゲームはどのくらいかかるのか。
また初めての言語でプログラムしていくので結構かかるかもですね。

正直プログラムよりドット絵の方が心配ですけども......
まぁ、ドット絵は大胆に打っていきましょうか！やったことないことに頭を抱えても答えは出ませんからね！

同人のおいたんおねぇたんは優しいって誰かが言ってたので、それを信じてやっていきたいと思います。

追記：入荷未定だったリニアPCMレコーダー『DR-07X』ちゃんが今日届くみたいです。やったぜ。俄然ゲーム制作のやる気がでてきたぞ～！

【自作ツール進捗】致命的な設計ミスで作り直す話

こんばんは。てんたこソフトです！

皆さんは、完成間近というところで作り直しになった経験はありますか？
自分は今さっきなりました！
今回はそんなお話です。

どんな問題が起きたの？

つまるところコイツです。

45種類のタイルがあれば作れる！と思い込んでました。
CornerがConerになってるのは関係ありません。

あと4種類必要でした。
ただ画像生成の手法が想定と変わるため、増加した49種類の方を作るのは簡単なのですが、本命の3,4種類の方ができないことに気が付きました。

さて、どうしようかとかなり迷っています。
というか困ってます。本当にどうしよう？

とりあえず今日はふて寝します。
ずっとアルファベットを眺めていたので、頭をリセットするついでに息抜きでもします。

おわりに

ゲームの方は先にシナリオを作っているんですけど、どこまでをゲームにしたらいいのか悩みますね。
主人公ちゃんのキャラは決まりました。あともう一人もおおまかにできました。

初めて制作側になって改めて思います。
アクションゲームにストーリー組み込んでる人すごい！！！
好きな機能を取り入れてる人すごい！！

ちょっとこだわると一年以上かかりそうなので、ある程度許容していきたいです。
初めから全部入れなくてもいいですもんね。

【自作ツール進捗】画像を64x64に切り分けるのに成功した話

こんばんは。てんたこソフトです！

今回は自作ツールの進捗報告です。
前回から違う点として、

• ドラッグ＆ドロップで画像アップロード
• アップロードした画像のプレビュー
• 生成画像のプレビュー(仮)

の機能を実装しました。
今回のメインは、画像を生成するための機能の話です。
サムネ画像の通り、左上の画像を64x64の大きさで切り出す機能を実装しました。

こんな感じですね。

見た目だとあまり進んでませんが、ここまできたら後は118個の座標にタイルを当てはめるだけですね！
この作業は手動なのである意味山場です。今日中に完成させたい！

おわりに

この分解機能はプログラムで実装しているんですけど、作業中に今どんなふうになっているか見えないのでドキドキしながら実装してました。

プログラムが間違っているとプレビュー自体が真っ白になって見えないので、上手く映った時の安心感はすごいです。

また、何で動かないのかを究明するより、違うアプローチで実装した方が解決することが多かったです。
そもそものやり方を間違ってることが多いんでしょうね。気をつけねば。

以上、開発の息抜き記事でした！

自作ツールの進捗とgif画像を簡単に録画する話

こんばんは。てんたこソフトです！

みなさんはスクリーンショット、どうしてますか？
windowsなら「win + shift + s」で切り取り範囲を指定してスクショできますよね。

では保存した画像に補足を付けたい時はどうしてますか？

• 文字入れ
• 補足線の追加
• クロマキーを適応して透過
• etc...

これらの編集をできるソフトは数はあれどいいものが見つかりませんよね。
これが静止画ではなく、gif画像なら尚更でしょう。

また、短い時間録画したけどわざわざgifにするの面倒だなぁ、画像編集するように動画も編集できないかなぁ、と思ったことありませんか？

それらを解決するイイ感じのソフトを紹介したいと思います。

初めからgifとして録画する「ScreenToGif」

見出し通り、無料で使用できる「ScreenToGif」を使うと初めからgif画像として画面を録画できます。
もちろん、録画範囲も設定できますよ！

そして日本語にも対応してます。

公式ページはこちら

百聞は一見に如かず、ということでどうぞ！

どうですか？なかなかに便利じゃないですか？
画像ではやってませんが、録画中のキーボード入力を表示することもできるんだとか。
書き出しの種類も豊富で、

• アニメーション画像(Apng, Gif, Webp)
• 動画(Avi, Mkv, Mov, Mp4, Webm)
• 静止画(Bmp, Jpeg, Png)
• その他(Psd)

で書き出せるみたいです。

ちょっとした画像編集や、gif画像の編集/録画を1つのソフトでできるのでかなり気に入ってます。

公式サイトだけでなく、Windows Storeでもダウンロードできるので導入も簡単ですね。

自作ツールの進捗

プレビュー画像を表示するテンプレートをJavascriptで作成しました。
つまみをいじることによって、プレビューの大きさを変更するだけの機能でしたがかなり苦労しました。

次はプレビューにアップロードした画像を表示させる機能を追加する予定です。