MagicaVoxel | katakuriko https://katakuriko.site Thu, 17 Jul 2025 01:46:11 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://katakuriko.site/wp-content/uploads/cropped-HlaHRV-32x32.png MagicaVoxel | katakuriko https://katakuriko.site 32 32 MagicaVoxelにアニメーションを設定してGDevelopで動かす https://katakuriko.site/magicavoxel-animation/ Mon, 23 Jan 2023 21:03:52 +0000 https://katakuriko.site/?p=815 初心者の方でも簡単にできるので早速やってみましょう。
いきなり注意点として、MagicaVoxelのアニメーション機能は現時点(2023年1月)で
MagicaVoxel-0.99.7.0-win64のWindows版でしか使用できません。
ですが、Macの方はWineアプリを使ってMacでwin用を起動しましょう!!

  1. MagicaVoxelを起動しProjectのサンプルdeerを選択します。
  2. GDevelopは右が0度になるので、deerを右向きに変更します。
    Rotate90°のZを2回クリックして右向きにします。
  3. Renderモードに切替て、背景を透過・カメラをIsoにします。
  4. カメラのYaw45に設定し、ImageのStartを0Endを3に設定しRenderします。
    保存先はYawで設定した値がわかるようにフォルダー名を設定し出力しましょう。
    例えばdeer45とか良いかと思います。
  5. カメラのYaw45ずつ増やしてRender8方向の画像を出力します。
    各方向はフォルダーに分けて出力してください。
  6. 出力画像を GDevelopに取り込みます。
    新しいスプライトオブジェクトを作成し、「スプライトを追加」から画像を選択します。
    この際にポイントなのがファイル名を昇順に並び替えてから複数画像を選択してください。
    また「アニメーションの別名」は、Yawで設定した値に-1をかけた数字を設定してください。
    そしてループをチェックしてください。
  7. このスプライトオブジェクトのビヘイビアに「トップダウン移動」を設定します。
  8. 「オブジェクトを回転する」のチェックを外し、加速度と最高加速度は同じ値にするとスムーズに移動します。
  9. 移動処理は1行です。ポイントはdeerスプライトの角度でアニメーションを変更させます。
  10. プレビューして動かしましょう。どうでしょうか?いい感じに走ると思います。
    アイドル状態がないので走りっぱなしですが、同じようにアイドル画像を出力し設定すれば大丈夫です。
  11. 以上で完了になります。
]]>
MagicaVoxelの出力画像をGDevelopに取込み https://katakuriko.site/magicavoxel-sprite/ Fri, 23 Dec 2022 04:50:43 +0000 https://katakuriko.site/?p=751 MagicaVoxelでモデリングし出力した画像をGDevelopに取込みます。

初心者の方でも簡単にできるので早速やってみましょう。
MagicaVoxel-0.99.7.0-win64を使っていますが、Mac用の最新版でもいいと思います。
余談ですが、私はMacですがアニメーションを使いたいのでwin用のMagicaVoxelを使っています。
Wineアプリを使ってMacでwin用を起動しています。

  1. MagicaVoxelProjectからサンプルで好きなvoxを選択します。(chr_knightを選択)
  2. Renderモードに切り替え、Cameraを「Pers」に変え、Cameraの中心を初期化します。
  3. 背景を透過するため、LightのBackgroundのTransparentOFFDisplay GroundをON
  4. ImageTurntableを選択、Frame36に設定、 Renderボタンをクリックして画像を出力。
  5. GDevelop新規スプライトオブジェクトを追加し、「スプライトを追加」をクリック
  6. 画像ファイルを選択する際は、ファイル名で昇順ソート全ファイルを選択してください。
    「名前」ヘッダーをクリックするとソート(昇順、降順)が切り替わります。
  7. スプライトオブジェクト名(chr_knight)、アニメーション名を設定(rotate)
  8. スプライトオブジェクトをシーンにドロップし、プレビューすると1回転します。
  9. これで基本的には完了ですが、マウスの位置でスプライトのアニメーションを操作します。
    スプライトオブジェクトの「ポイントを編集」OriginCenterと同じ位置にします。
  10. イベントシートに、カーソルX位置とchr_knight X位置を比較しアニメーションフレームを加減算
  11. 以上で完成です。


]]>