TopDown Engine 入門 Part 2 ～デモシーン編～

デモシーンを見てみる

TopDown Engine のインストールが完了したら、デモシーンを見てどんな機能があるかを調べていきましょう。

様々なデモシーンが用意されていますが、最初は「MinimalSandbox2D」から見ていくのがオススメです。MinimalSandbox2D では、TopDown Engine が備えている 2D の機能を一通り試すことができます。

MinimalSandbox2D

デモシーンは、キーボードの WASD とマウスで操作します。Xbox のゲームパッドを持っていれば、そちらを使うこともできます。*1

WASD で移動できる

普通のドアと、鍵が掛かっているドア

スイッチで開くドアと、押して動かせるブロックの組み合わせ

動く足場もあれば……

ワープなんかもある

武器を拾えば攻撃もできる*2

他にも、NPC と会話したり、敵を攻撃して倒したりもできます。これだけの機能があれば、トップダウンビューのゲームがだいぶ作りやすそうですね。

---

NEXTTopDown Engine 入門 Part 3 ～最小構成編～

PREVTopDown Engine 入門 Part 1 ～インストール編～

---

*1:DUALSHOCK 4 などのコントローラーでも一応動かせますが、ボタン配置がバラバラで思ったように操作ができないので、Xbox のコントローラーを持っていない場合はキーボードで操作したほうが良いでしょう。

*2:フォーカスはマウスで動かします。

TopDown Engine 入門 Part 1 ～インストール編～

はじめに

今日から「TopDown Engine」というアセットを使い始めるので、備忘録を兼ねて、このブログに学習したことを書き留めておきます。

TopDown Engine とは

「TopDown Engine」は、Unity 上で動作し、見下ろし型（"トップダウン"ビュー）のゲームを簡単に作ることのできるツール――いわばエンジン内エンジン*1です。要は『ゼルダの伝説』みたいなゲームが簡単に作れるよ、ということですね。公式の概要を読むと、軽量かつ堅牢、拡張性にも富み、PC だけでなくモバイル端末やコンソールなどあらゆる環境に対応しているとのこと。万能すぎひん……？　書いてあることが凄すぎてにわかには信じがたいですが、実際に使ってみて本当かどうか試してみたいと思います。

なお、公式サイトにはより詳しい紹介が載っていますので、そちらもご覧になることをおすすめします。英語ですが、ムービーがふんだんに使われているので、眺めるだけでもなんとなく TopDown Engine がどういうエンジンなのかを理解できるでしょう。

インストール

公式のドキュメント（英語）を頑張って読みながらインストールしていきます。

（環境：Unity 2019.4.1f1, Windows 10 Pro 2004）

まず、Unity Hub で新規プロジェクトを作成し、Asset Store から TopDown Engine をインポートします。既存のプロジェクではなく、必ず空のプロジェクトにインポートしてください。

「空のプロジェクトにインポートしてください」と警告が出てくる

Import ボタンを押すと、今度は「Package Manager で必要なパッケージをインポートします」というダイアログが出てきます。承認すると、「2D Animation」や「Cinemachine」などが自動でインポートされます。

それが終わると、見慣れたインポート画面が現れるので、すべてチェックマークが付いたままインポートしましょう。とても大きなアセットなので、ちょっと時間が掛かることにご留意ください。

動作確認

ここまで完了すると、Assets/ ディレクトリ内がこのような構成になっています。

Assets/TopDownEngine/Demos/ の中に数種類のデモシーンが入っていますので、その中の Minimal2D/MinimalSandbox2D.unity を開き、シーンを再生してみましょう。ゲームをプレイすることが確認できたら成功です🌟

---

NEXTTopDown Engine 入門 Part 2 ～デモシーン編～

---

*1:ノベルゲームでいうところの「宴」みたいな立ち位置ですね。

Visual Studio Code の Csscomb がカスタムプロパティを含む CSS でエラーになる

はじめに

CSS / SCSS のプロパティを自動で並び替えてくれる、「CSSComb」というツールがあります。Visual Studio Code 用の拡張機能も存在し、Visual Studio Code で CSS を書く際に非常に便利なのですが、カスタムプロパティを含んだ CSS に使用するとエラーが発生してしまいます。

どうやら本家 CSSComb ではすでに修正済みで、その修正が Visual Studio Code の拡張機能に取り込まれていないようです。

そこで、手動で拡張機能の中身を最新版の CSSComb にアップデートしていきます。

作業内容

まず、本家の CSSComb をクローンしてきます。

そして、クローンしてきたリポジトリの src/ ディレクトリの中身を、Visual Studio Codeの CSSComb のディレクトリ*1にコピーします。

最後に、Visual Studio Code を再起動して、エラーが起きないのを確認して完了です。

*1:Windows の場合は C:/Users/{USERNAME}/.vscode/extensions/mrmlnc.vscode-csscomb-5.3.1/node_modules/csscomb/lib/

border を可視化して、CSS の調整をやりやすくする

* {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

いやまぁ、考えてみればめっちゃ当たり前のテクニックなんですけど、さっきこの手法を思いつくまで 10 年くらいずっとデベロッパーツールで頑張って調整してました……（´・ω・`）.;:…（´・ω...:.;::..（´・;::: .:.;: ｻﾗｻﾗ..

追記

Ryosuke さんから、borderだとレイアウトが若干変化してしまうので box-shadow を使ったほうが良いと教えていただきました！ 天才か……😳

* {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

✌

Aseprite の UI を見やすくする

はじめに

Aseprite は優れたドット絵エディターですが、自身がドット絵エディターであることを主張するかのように、UI にもドットフォントが採用されています。

Aseprite のデフォルトのトップ画面

これはこれで味があって良いのですが、さすがに見づらいので、普通の見た目に変更しようと思います。

テーマを変更する

Aseprite にはテーマを変更できる機能が備わっているので、これを用いてアウトラインフォントを使用するテーマに変更します。

Minimal Dark HD をダウンロードし、次に Aseprite の [Edit] > [Preferences] > [Extensions] > [Add Extension] で拡張機能追加ウィンドウを開き、ダウンロードしたテーマファイルを追加します。

[Preferences] をクリックし……

[Extensions] 内の [Add Extension] をクリック

ダウンロードしたテーマを選択

これで、Aseprite に Minimal Dark HD テーマが追加されました。[Edit] > [Preferences] > [Themes] で Minimal Dark HD を選択すると、Aseprite の外観が変わり、フォントがアウトラインのものになります。

[Theme] 内の [Minimal Dark HD] を選択して [Select]

Minimal Dark HD テーマが適用された

日本語化する

UI が英語のままで問題ない場合はここまでで OK ですが、Aseprite には有志による日本語訳も用意されており、日本語化が可能です。ついでにそれもやっておきます。

Aseprite JP Wiki* から日本語化ファイルをダウンロードし（Zip ファイルですが、解凍する必要はありません）、先ほどと同じように [Edit] > [Preferences] > [Extensions] > [Add Extension] で日本語化ファイルを追加します。

すると、[Edit] > [Preferences] > [General] > [Language] の項目に「japanese」が追加されるので、それを選択すると、UI が日本語になります、が……。

[Language] を [japanese] にすると日本語化されるが……

このままだと、日本語のフォントがおかしい

日本語のフォントがおかしくなってしまっているので、これも修正します。[編集] > [環境設定] > [テーマ] で Minimal Dark HD を選択後、右下の [フォルダを開く] を押してテーマのフォルダを開き、theme.xml を開きます。

[テーマ] 内で [Minimal Dark HD] を選択した上で、右下の [フォルダを開く] を押す

Minimal Dark HD がインストールされているフォルダが表示されるので、theme.xml を開く

6 行目 ～ 13 行目がフォントを設定している部分なので、ここを好きな日本語フォントに書き換えます。ここでは源真ゴシックPに書き換えます。フォントはあらかじめ OS にインストールしておいてください。

<!-- 変更前 -->

<fonts>
    <font id="default" name="SegoeUi" type="truetype" file="segoeui.ttf" size="12">
        <fallback font="Unicode" size="12" />
    </font>
    <font id="mini" font="SegoeUi" size="11">
        <fallback font="Unicode" size="11" />
    </font>
</fonts>

↓

<!-- 変更後 -->

<fonts>
    <font id="default" name="genshingothic" type="truetype" file="genshingothic-p-regular.ttf" size="12">
        <fallback font="Unicode" size="12" />
    </font>
    <font id="mini" font="genshingothic" size="11">
        <fallback font="Unicode" size="11" />
    </font>
</fonts>

書き換えができたら、Aseprite を再起動して、フォントが変わっているのを確認します。

日本語フォントが指定したフォントに変更された

まとめ

以上で、Aseprite の UI を見やすくすることができました。theme.xml をいじれば、フォントのサイズなども変更することができるので、自分好みの設定を見つけてみてください。

本当はフォントは Yu Gothic UI にしたかったんですけど、なぜかできなかったんですよね……。やり方をご存じの方がいらっしゃったら、コメントで教えてくださると嬉しいです！

Project ウィンドウで任意のディレクトリを一番上にする

Unity プロジェクトのディレクトリ構成についてです。

Unity では、AssetStore などから外部アセットをインポートすると、ほとんどの場合 Assets/ ディレクトリ直下に配置されます。そのため、自身で作成したシーンやスクリプトを Assets/ 直下に作ってしまうと、外部アセットと混ざって見つけづらくなってしまいます。

これを避けるため、自身で作ったファイルは一つのディレクトリにまとめて管理するというハックがあります。

ですが、そのまとめたディレクトリ自体が他の外部アセット群の中に埋もれてしまうという問題は残ったままです。なんとかしてこのディレクトリを一番上に持っていきたいのですが、どうしたらよいでしょうか。

ちなみに、環境は Windows です。

「_MyProject」

こういう場合によく使われるのは、先頭に _ を付けるというやり方です。ですが……。

このように、なぜか Unity の Project ウィンドウ内では数字の方が序列が上になっていて、数字から始まる外部アセットがある場合は一番上に来てくれません。

「-MyProject」

今度は - にしてみます。そうすると、ちゃんと一番上に来てくれました。

が、今度はエクスプローラーで問題が起こります。

このように、 - は無いものとして扱われてしまいます。なんでや……。

「#MyProject」

Unity 内でもエクスプローラーでも一番上に表示されるような記号はないものか……と探してみたら、ありました。 # です。

良いですね！ これで内部のファイルが見つけやすくなったと思います。

JavaScript からマクロを実行する

既存のタグを JavaScript から実行する方法は探せば見つかるのですが、マクロを実行する方法は見つからなかったので、自分で調べた方法を書き残しておきます。

コード

[macro name="macro_test"]
    マクロが呼ばれました。
[endmacro]

[iscript]
    let macro = TYRANO.kag.stat.map_macro["macro_test"]

    TYRANO.kag.ftag.nextOrderWithIndex(macro.index, macro.storage)
[endscript]

実行結果

TYRANO.kag.stat.map_macro にマクロが一式入っているので、その中から実行したいマクロを探して、そのデータを nextOrderWithIndex に渡しています。

引数を渡す場合

以下のように書くことで、引数も渡せます。

コード

[macro name="macro_test"]
    [font color="&mp.color"]
        マクロが呼ばれました。
    [resetfont]
[endmacro]

[iscript]
    let macro = TYRANO.kag.stat.map_macro["macro_test"]

    TYRANO.kag.stat.mp = {
        color: "0xff00ff"
    }

    TYRANO.kag.ftag.nextOrderWithIndex(macro.index, macro.storage)
[endscript]

実行結果

注意

直接 nextOrderWithIndex を実行しているので、内部的にはイレギュラーな処理になっています。もしかしたらどこかでエラーが起こるかも……。新しい情報が見つかったら、この記事もアップデートしたいと思います。