『Crocotile 3D』の紹介とローポリキャラクターを作成する際に使用した操作方法のTips集

3dcg crocotile3d

『Crocotile 3D』基本画面

store.steampowered.com

初代プレイステーション時代くらいのローポリゴンのモデリングに特化した３ＤＣＧソフトウェアです。タイルマップベースによる面張りでモデリングするのが主な手法になります。日本語の情報がほぼないソフトウェアなのですがとても使いやすくもっと普及して欲しいため自分の為にも操作方法を備忘録として記事にします。

steamcommunity.com

投稿されている作品を見ると素晴らしい表現力のモデルがたくさんありソフトウェアの底力を確認できます。

www.youtube.com

シンプルにまとまった統合型の３ＤＣＧソフトウェアでもあり、リギングやシーンアニメーションを設定する機能もあります。ゲームエンジンであるGodotとの相性が良く作製したモデルをそのままゲーム内で使用することができます。私でも以下のツイートに示すモデルくらいならモデリング出来ました！人型をここまでモデリング出来たのはこれが初めてです。いつもどの３ＤＣＧソフトウェアでもローポリですら大変過ぎて諦めてしまうけれどCrocotile3DはＵＩと操作方法がシンプルで混乱することなくソフトウェアの使い方を覚えられます。

ローポリに特化していることもありBlenderやMaya、Metasequoiaに代表されるようなモデリングを補助する便利な機能（厚み付けモディファイアーやスムース等）はないです。複雑な形状のモデリングに関してはある程度原始的なモデリング手法を学ぶ必要と練習が必要だと思います。公式サイトやチュートリアル動画を見て頂くと分かるのですがポリゴン数が多かったり矩形ではないポリゴンを扱うのは苦手なためキャラクターのモデリングを行う場合は相性が悪いです。近年に代表されるＶＴｕｂｅｒのようなモデルはものすごい根気があればやってやれないこともないでしょうがそういうモデリングを行う場合は素直に他の３ＤＣＧソフトウェアを使用した方が良いと思います。

タイルマップベースなためドット絵エディタが内蔵されております。モデリングしたオブジェクトをUV展開後に内蔵されているドット絵エディタで色塗りすることが可能です。ただ肝心のドット絵エディタは癖が強く扱いずらいのが難点ではありますがドット絵の描画に制限はありません。必要なら画像ファイルへ出力して他のソフトウェアで編集したものを再度取り込みなおすこともできます。

PCゲームに代表されるマウスとwasdを使用した操作方法を採用しているためキーボードとマウスを使ったゲーム操作に慣れている方はかなり直感的に操作可能かと思います。むしろ直感的に操作でき過ぎて他の３ＤＣＧソフトウェアも同じ操作方法にして欲しいと思うくらいです。

操作集

全般

  • Tabで描画モードと編集モードを切り替える
  • ctl+9でワイヤーフレームの表示・非表示を切り替える

カメラ

  • space+マウス左クリックでカメラ回転
  • space+マウス右クリックでカメラ平行移動
  • 中マウススクロールでカメラ拡大・縮小

描画モード

十字線の位置にタイルが貼り付けられる

  • 左クリックでタイル貼り付け
  • 右クリックでタイル削除
  • space+wで十字線を奥に
  • space+sで十字線を手前に
  • w,a,s,dで十字線を上下左右に移動

『Crocotile 3D』プリミティブボタン

プリミティブの追加は描画モードのキャプチャーのボタンから配置できます。

『Crocotile 3D』分割数

追加するプリミティブの形状とプリミティブの分割数は「Transform」タブのキャプチャーの部分から設定できます。

編集モード

『Crocotile 3D』単位ピクセル数

モデル編集時の単位Pixelを変更する場合はTilesetタブのキャプチャーの位置にある値を変更します。キャプチャーでは1px単位ずつ編集ができるようになります。デフォルトは16pxなはずです。小数点以下も設定することができます。

  • 左クリックで頂点・線・面選択
  • 同じ個所を左クリックで頂点・線・面選択解除
  • ctl+aで全選択
  • ctl+dで全選択解除
  • ctl+cで選択した頂点・線・面のコピー
  • ctl+vで選択した頂点・線・面の貼り付け
  • w,a,s,d選択した頂点・線・面選の平行移動

オブジェクト化

『Crocotile 3D』オブジェクト化① 『Crocotile 3D』オブジェクト化②

  • 編集モードでタイルを選択して右クリックから「Create Object」でシーンにオブジェクトとして追加できる
    • オブジェクト化する際は十字線の位置に注意すること。十字線の位置も一緒にオブジェクト化される。その際の十字線の位置を基準にオブジェクト化した物体は回転・移動・拡大・ミラーリングを行うことができる
    • オブジェクトに変換後は全選択から右クリックの「Edit Object」で個別に編集ができる
      • オブジェクトを選択してEnterキーでも良い
  • オブジェクト化されたモデルは「Scene」タブから確認できる
    • ダブルクリックで名称を変更できる

Tileset, UV, Painting

  • space+左クリック+ドラッグでキャンバスを動かせる
  • 中マウススクロールで拡大・縮小

Tips

チュートリアル動画を視聴したり実際に動かして自分なりに理解したモデリング操作の備忘録を残しておきます。

カメラの拡大・縮小率を変更する方法

『Crocotile 3D』カメラ設定① 『Crocotile 3D』カメラ設定②

メニューの「Edit → Settings」で設定ダイアログを表示して、「Camera」項目にある「Camera Field of View」の値を変更する。小さいほど拡大しますがポリゴン同士の重ね合わせによって引き起こされるＺファイティング（ちらつき）も強くなります。

十字線の位置を初期化する方法

『Crocotile 3D』十字線初期化

「Transform」タブの「Crosshair」の領域にあるPositionをすべて０の状態で「Set」をクリックすれば初期位置に戻せます。

ミラーリングの方法

『Crocotile 3D』ミラーリング① 『Crocotile 3D』ミラーリング②

ミラーリング機能があるため片側だけモデリングしていくことで全体をモデリングする手法が使用できます。

「Scene」タブから作成したオブジェクトのメニューダイアログを開いて「Mirroring」にある「Mirroring Enabled」にチェックを入れるとオブジェクト生成時の十字線を基準としてミラーリングされます。

「Marged to Object」をクリックすればミラーリングされたオブジェクトがミラーリング元のオブジェクトに生成されます。ボーンやモーションを設定する際はマージしましょう。

面分割の方法

『Crocotile 3D』面分割

面を選択状態にして中マウスボタンをクリックすると緑色選択状態なります。そうすると分割線のプレビューが表示されるので分割したい位置で右クリックから「Faces→Split」で分割できます。ショートカットのalt+sでも行けます。

二つの頂点をくっつける方法

『Crocotile 3D』頂点結合

くっつけたい頂点を選択して . （ピリオド） キーで先に選択された頂点が後に選択された頂点に引っ張られる形で結合します。

オブジェクトのUVを別のタイルセットに移したい場合

『Crocotile 3D』タイルセット変更

移したいタイルセットを選択状態にし、かつ移したいオブジェクトの面（UV）を選択した状態で「TIleset」タブのメニューから「Apply Tileset to the Selected Faces」をクリックすると移せます。※ 「UV」タブ側のUVも選択している必要があります。

タイルセットをチェックパターンで塗りつぶす方法

『Crocotile 3D』チェックパターン

「Painting」タブからチェッカーマークにチェックを入れて、色を二つ選択した状態で塗りつぶすとチェックパターンで塗りつぶせます。

UVを整える方法

公式のチュートリアル動画を見るとどのように行うのか分かるのですが英語なため自分なりに方法を備忘録で残しておきます。

『Crocotile 3D』UV操作①

「UV」タブを選択した状態で面を選択するとキャプチャのようにUVが表示されます。選択したタイルからそのままモデリングを行っていれば殆どの面は同じタイルにUVが貼られていると思われます。

『Crocotile 3D』UV操作②

表示されたUVを選択した状態で、右クリックから「Transform → unwrap」でモデリングした面の形状にUVを変換することができます。UVにも十字線はありダブルクリックすることで特定のUVを選択した状態で十字線をUVの中心に持ってくることが出来ます。これはUVの形状をそのままに回転させたり向きを変える際に便利です。

「unwrap」は選択中のUVを現在の面の形状に変換してしまうためポリゴンの粒度や形状が細かすぎると相性が悪いかもしれません。色塗りをする際はドット絵エディタを使用するのですがオブジェクトの形状にもよりますがUVは矩形のままの方が都合が良いかもです。作成しているモデルに合わせて適宜判断する必要があります。例えば地形などのマップや建物等をモデリングしているなら矩形のままがよいでしょう。人や生物のような形状が複雑な場合はunwrapしても良いと思います。私は色塗りの都合上タイルマップの形状そのままでUV展開を行う方が好みなためこのキャプチャでは矩形のままです。

少しずつ面を選択しながら手動でUVの形と位置を整えていく必要があります。

『Crocotile 3D』UV操作③

面を選択しながらUVの形を整えたら整えたUVを全選択して右クリックから「Transform → Round to nearest pixel」をクリックします。するとUV頂点をもっとも近いドットの座標位置に合わせてくれます。結果として一部頂点は綺麗に結合して揃うかと思います。もちろん一番近いドットがズレて揃わない頂点も出てくるのでそういう箇所は手動で調整します。

『Crocotile 3D』UV操作④ 『Crocotile 3D』UV操作⑤

綺麗に結合しなかった頂点は「UV」パネルにある「UV Percision」でUV頂点の移動Pixel量を変化させることができるので数値を変えつつ「UV」タブにあるキャプチャのボタンをオンにすると頂点結合のスナップを効くのでスナップを活用して手動で整えます。

UV内を一気に塗りつぶす方法

『Crocotile 3D』塗りつぶし① 『Crocotile 3D』塗りつぶし② 『Crocotile 3D』塗りつぶし③

「Painting」タブから塗りつぶしたい色を選択した状態から「UV」タグのUVエディタで塗りつぶす対象のUVを選択した状態で右クリックからの「Paint → Fill Solid」で選択したUV内を一気に塗りつぶせます。

２０２６年１月１５日追記

モデルの頂点を綺麗にそろえる方法

編集モードに記載がある単位Pixel量を変えながらモデリングしていると頂点が微細にずれていくと思います。好みにもよりますが綺麗に頂点が揃っていて欲しい場合は以下の方法で揃えられます。他のモデリングソフトウェアで言えば「選択した頂点を座標軸で揃える」に相当する機能ではありますが正確には頂点を揃えるというより選択された頂点を３D空間上の単位Pixelグリッドのもっとも近い位置に合わせる機能です。

『Crocotile 3D』頂点を揃える①

揃えたい頂点を選択して、単位Pixel量を合わせたい移動量に修正し右クリックから「Vertices → Align vertices to the grid」で揃います。キャプチャでは全頂点を選択していますがグリッドに合わせたい頂点のみの選択でも効きます。

『Crocotile 3D』頂点を揃える②

適用した状態です。透視投影なため分かり辛いですが左側の頂点のラインはその頂点から見てもっとも近いグリッド（位置）に揃っているかと思います。

※ （便利ですが平面を綺麗に揃えたいみたいな要望の場合はある程度ポリゴンを構成する頂点を合わせたい座標軸の近い位置には調整しておく必要があるのが難点ですね…）

備考

私が遭遇した現象の解決法を記載します。

gltf形式へ出力してビューワーで読み込むとポリゴンの境界に線が見える

『Crocotile 3D』境界に線が見える①

こんな感じの状態の事です。まるで正中線で一刀両断されたようです。（笑

これはUVペイントにてエディタ上に表示されているUV境界ギリギリまでしか塗られていないと遭遇します。

『Crocotile 3D』UVの塗り状態①

こんな状態です。「Round to nearest pixel」を使用するとUVが綺麗に整う上にUVの境界も分かりやすくCrocotile3Dの描画モードでは綺麗に見えるためついキャプチャのようにしたくなります。ですが境目を綺麗にしたい場合ははみ出るように塗りつぶす必要があります。

『Crocotile 3D』UVの塗り状態②

こういう風にすればgltf形式に出力しても綺麗になります。Crocotile3D上で見た目が綺麗でも適宜gltf形式に出力してビューワーで確認することをお勧めします。

２０２５年５月２７日追記

『Crocotile 3D』UV Padding

この事象はUVブリードあるいはシームと呼ばれる事象で境界の色の変化が大きいドット絵のような解像度の低いテクスチャが設定されている３ＤＣＧモデル共通の問題です。どのゲームエンジンで読み込んだとしてもテクスチャに対して最近傍補間（Nearest）等の処理を施さないと発生しうる事象です。もっとも有効な対策方法はパディング（余白）が現実的でCrocotile3Dにもパディング機能があります。展開済みのUVだともうどうしようもないですが、あらかじめ「UV Padding」を設定しておくとキャプチャのように縁取りを想定したUV展開が可能です。

『Crocotile 3D』Add Padding

またUVの境界に適切にパディング（余白）があることが前提ですが「タイルマップ右クリック→ Paint → Add Padding」を使用すると境界の色でUVの余白を一気に塗りつぶすことが可能です。

２０２５年７月６日追記

『Crocotile 3D』Tileset Material Setting ① 『Crocotile 3D』Tileset Material Setting ②

Crocotile 3Dでシーム現象が起きない理由はフィルター設定があるおかげです。モデルに適用されているタイルマップを選択した状態で「Tilemap」の「Tileset Material Setting」からフィルターを「Nearest」から「Liner」に変えるとパディングがない状態だと境界線に線が入る状態の表示にすることができます。裏を返せば使用するゲームエンジンがテスクチャマッピングでNearestフィルターを使用できるのであればパディングを埋めなくてもCrocotile 3Dのデフォルト設定と同じ見た目にすることが出来ます。

まとめ

この記事では全般的な操作手法と実際に触っていて私が感じた疑問点について備忘録としてまとめました。余力があれば随時追記もしたいです。

他にボーンの作成から設定、リギング、アニメーションの機能もありそちらのハウツーも分かっているので別途記事に出来たらと思っています。以下のようなアニメーションをCrocotile3Dで作成することができます。

コメントへの回答

２０２５年６月２１日追記

BAKINでゲーム作ってみようかな～と検討していて、ローポリのものを制作したいのですが… たとえばcrocotileで作った地形をBAKINに取り込むことは可能なのでしょうか？

こちらに関しましては以下のRPG Developer Bakin公式のWikiが参考になるかと思います。

rpgbakin.com

Bakin で利用できるモデル形式は、FBX形式と VRM形式です。 ここでは、FBX形式のモデル仕様について解説します。 VRM形式のモデルについては、.vrmフォーマットモデル を参照してください。

だそうです。結論から言えばCrocotile 3Dで作成したモデルを直接Bakinに読み込ませることはできません。 ただ、Crocotile 3Dはgltf形式での出力が可能なためgltf → Blender → fbxで変換すればBakinで扱えるはずです。

あともう１つ参考になるのが以下のページです。

rpgbakin.com

実はVRM形式はgltf形式をベースに作られた規格であるため、Blenderを使いfbxへ変換する方法に関しては上記リンクの方法も参考になるかと思います。

cgworld.jp