とあるプログラマの備忘録

都内某所に住むプログラマが自分用に備忘録を残すという趣旨のブログです。はてなダイアリーから移動しました!

MagicaVoxelでキャラクター作る 其の1

使い方は覚えたので後は作るだけだ!

キャラククターテンプレート

f:id:raharu0425:20150518192724p:plain

目は小さくしました

ナイト?(忍者とか言われたにんにん)

f:id:raharu0425:20150518192758p:plain

まぁまぁぼちぼち

白魔導士

f:id:raharu0425:20150518192823p:plain

作るの慣れてきた

ヒーラー

f:id:raharu0425:20150518192842p:plain

回復系が好きです!!!

攻撃職をつくらないと(汗

ペンちゃん

f:id:raharu0425:20150518192949p:plain

_人人人人人人人_
> ペンちゃん <
 ̄Y^Y^Y^Y^Y^Y ̄

MagicaVoxelで作ったモデルをBlenderで読み込みUnityで表示する

Exportする

モデルをExportします左下のExportメニューで「obj」を選択します

f:id:raharu0425:20150517230403p:plain

magicavoxelのexportフォルダに吐き出されています(これ分かりにくい)

f:id:raharu0425:20150517230456p:plain

blenderにインポート

メニューからobjインポートします。

f:id:raharu0425:20150517230859p:plain

今のままじゃデカいのでサイズを0.3にしてライトを調整します。
もしもテクスチャが剥がれてしまって見えない場合は
[option + z]を押すと見れると思います。

f:id:raharu0425:20150517231018p:plain

ボーンをいれてウェイトペイントして、モーションを付けます。

こことてもはしょりましたが、初心者な私は大体2日程かかりました。 なにも分からないところから作るのは大変ですが頑張って作りましょう。

ボーン作る

f:id:raharu0425:20150517231503p:plain

ウェイトペイントを塗る

f:id:raharu0425:20150517231532p:plain

モーション作る


Blender 走るモーション

Unityに読み込む

なんと素晴らしい事にblenderのファイルを直接読み込めるので
Assetsの直下に.blendファイルをDDすると自動で読み込まれます。

インポートするとこんなフォルダが出来上がります
f:id:raharu0425:20150517232021p:plain

.blendファイルにはテクスチャが含まれていなかったので、 MagicaVoxelからExportしたpngもUnityで読み込みます。

f:id:raharu0425:20150517232617p:plain

これでそろいましたがまだテクスチャが貼られていませんが
先にマテリアルのシェーダーを変更します。

f:id:raharu0425:20150517233115p:plain

これに先ほど読みこんだテクスチャをアタッチします。

f:id:raharu0425:20150517233302p:plain

モデルにテクスチャが反映されました

f:id:raharu0425:20150517233407p:plain

これで適当なAnimatorを作成してrunのアニメーションをアタッチすれば
問題なくうごきますが、アニメーションのループ設定自体は本体からしか変更が出来ない??見たいです
ムービークリップを外だしに出来ればいいのですが。。

f:id:raharu0425:20150517233843p:plain

とりあえず問題無く動くようです

f:id:raharu0425:20150517234124p:plain

ここまで出来れば
MagicaVoxelでモデルを作る
Blenderでモーション作成
Unityに組み込み

という作業フローが確立出来そうです。
次からはどんどんキャラクター作るぞい!!!

MagicaVoxelを使ってみる!!!

どうも昨日の夜良い案が思い浮かんだのですが、 膨大なリソースが必要なので1年くらい掛けて作ってみようかと思います。

今回の話はクロッシーロード見たいな3Dドット絵を簡単にかつ無料え作れる MagicVoxelの使い方をしらべてみました。 なんと無料なのにWin,Macどちらも使える!スバラ!!

ダウンロードはこちらから出来ます

voxel.codeplex.com

起動したら左のテンプレート見てみます おおーなかなかいいじゃないですか。

f:id:raharu0425:20150515120738p:plain

早速使ってみる

まずはどの位の大きさにするのか?というところは上部にある

f:id:raharu0425:20150515120840p:plain

この値を弄くります。とりあえず今回はドット絵の基本32x32にしてみます。

この状態でToolのFULLを押すと

f:id:raharu0425:20150515121123p:plain

キューブな物体が現れます。

f:id:raharu0425:20150515123121p:plain

cmd + fとcmd + gを押すとこんな感じでグリッドと中線を 追加してくれます。

3面図を作る。

絵心がないのはすいませんすいませんすいません
こんな感じで前横上から見た状態の絵を書く事です。

f:id:raharu0425:20150515120200j:plain

ドットを打つ

3面図はできたのでこのパースが崩れない様にドットを打って行きます。

f:id:raharu0425:20150515121722p:plain

Attach:3Dどっとを追加する Erase:消す Print:色を塗る Loop:移動する

な感じです。

のでPrintを選んで正面からの見た感じを作ります。

f:id:raharu0425:20150515121852p:plain

こんな感じ?
あれ3面図と違う?
とりあえず全てのキャラクターのひな形となる物を作成しているので気にしないでください

不要な箇所を削る

Eraseにして削って行きます

f:id:raharu0425:20150515122058p:plain

股の部分削り忘れたけどまぁいいか。

右正面を作る

これを右から見た状態で同じ事をします。

f:id:raharu0425:20150515122221p:plain

真上から見た状態を作る

f:id:raharu0425:20150515122310p:plain

丁寧に微調整と色付け

f:id:raharu0425:20150515122354p:plain

完成!!!

どうでしょうか?
超絶初心者の自分でも2時間程度でこんな感じで作る事ができました!!

絵が書けないめう。。。
ドット絵打とうにも陰影とか色彩感覚が無くてしょぼくなるめう。。。
それでもモデル作りたいめう。。。。

そんなめうちゃん(自分)にはうってつけです。
是非チャレンジしてみては如何でしょうか?

【Unity】Blend Treeを使用したRPG風8方向移動の作成

前回RPG風のマップの作成をしたので今回は
キャラクターを置いて、一旦WASDキーで8方向に移動する様にしたいと思います。

キャラクターオブジェクトを作成する

空のオブジェクトを作成してCharaとでも適当に付けておきます。
これにこんな感じでコンポーネントをアタッチします。 f:id:raharu0425:20150430224415p:plain

Animator Controllerの作成

BaseCharacterMotionという名前でAnimatorControllerを作成します。

f:id:raharu0425:20150430224858p:plain

これを先ほどのキャラクターオブジェクトにアタッチしておきます。

8方向アニメーションの作成

walk@[方向]のネーミングでアニメーションを8個作ります。
f:id:raharu0425:20150430232052p:plain

アニメーションの作り方は大体ここに書いてあります。
raharu0425.hatenablog.com

方向のパラメータを追加

XYの移動方向をセットする為に2つパラメータを追加します。 名前は適当に

Direction_X,Direction_Yとでも付けておきます。

f:id:raharu0425:20150430233201p:plain

AnimatorにBlend Tree ステートを追加する。

f:id:raharu0425:20150430232610p:plain
名前をWalkにしておきます。
f:id:raharu0425:20150430232653p:plain

これでBlendTreeを持っているステートができました。

BrendTree設定

Walkステートをダブルクリックすると詳細が見れます。

f:id:raharu0425:20150430233324p:plain

InspectorのBrendTypeを[2D Simple Directional]に変更して
Parametersを[Direction_X]と[Direction_Y]をセットします。

f:id:raharu0425:20150430233536p:plain

Motion Filedを8つ追加します。
f:id:raharu0425:20150430233757p:plain

これに先ほど作成した8方向アニメーションを追加し、Positoinを8方向に調整します。 f:id:raharu0425:20150430233857p:plain

これでBlendTreeが完成しました。
f:id:raharu0425:20150501182813p:plain

スクリプトを作る

2つスクリプトファイルを作成します。

//キャラクターのコントローラー
BaseCharacterController
//モーションを管理する基底クラス
BaseMortionController

f:id:raharu0425:20150430234317p:plain

BaseCharacterController.cs

using UnityEngine;
using System.Collections;
using UnityStandardAssets.CrossPlatformInput;


[RequireComponent(typeof (BaseMortionController))]
public class BaseCharacterController : MonoBehaviour {

    private BaseMortionController m_Character;

    private void Awake()
    {
        m_Character = GetComponent<BaseMortionController>();
    }
    
    
    private void Update()
    {
    }
    
    
    private void FixedUpdate()
    {
        // WASDの入力取得
        float h = CrossPlatformInputManager.GetAxis("Horizontal");
        float v = CrossPlatformInputManager.GetAxis ("Vertical");
        
        //移動
        m_Character.Move(h, v);
    }
}

BaseMortionController.cs

using UnityEngine;
using System.Collections;

public class BaseMortionController : MonoBehaviour {

    private Animator m_Anim;
    private Rigidbody2D m_Rigidbody2D;

    [SerializeField]
    private float move_speed = 7.0f;

    private void Awake()
    {
        m_Anim = GetComponent<Animator>();
        m_Rigidbody2D = GetComponent<Rigidbody2D>();
    }

    /**
    * 移動
    */
    public void Move(float h_move, float v_move)
    {
        //  移動方向に力を加える
        Vector2 direction = new Vector2 (h_move, v_move).normalized;
        m_Rigidbody2D.velocity = direction * move_speed;
        
        //モーション判定用のパラメータ   
        m_Anim.SetFloat("Direction_X", h_move);
        m_Anim.SetFloat("Direction_Y", v_move);
    
    }

}

これらをCharaオブジェクトにアタッチして f:id:raharu0425:20150430235235p:plain

完成


Unity BlendTreeTest - YouTube

Unity4.3から追加されたらしいBlendTreeとても便利です。
簡単に8方向移動ができました。

素材はこちらを使わせて頂いております。有り難うございます。

ぴぽや倉庫

RPGツクール素材支部|臼井の会

こちらの記事を参考させて頂きました有り難うございます。

Unity4.3 で追加された Sprite 機能を使ってみよう - その1 - Unityではじめるゲーム開発 - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル

【Unity】TileMapEditorで作ったデータをX-UniTMXで読み込ませる 其の3 -RPGマップ編

5/19追記
X-UniTMXがil2cppでビルド出来ない現象を確認しましたのでこちらの記事は参考までにしてください。
最新のX-UniTMXであば対応されている可能性があります。

さて前回の記事で別に横スクロールが作りたい訳じゃないとかいっていましたが
正直何を作ろうか完全にぶれていますすいません

とりあえずRPG風のマップをつくってそれでゴニョゴニョしたくなったので
今回はRPGマップの作成を行います。

この素晴らしいマップチップにはこちらの素材を使用させて頂きました有り難うございます!

piposozai.wiki.fc2.com

マップはレイヤーを分けて作る

レイヤーの順序はこんな感じで

f:id:raharu0425:20150428210806p:plain

レイヤー順に、

BackGround:背景
f:id:raharu0425:20150428211118p:plain
Terrain:地形
f:id:raharu0425:20150428211127p:plain
Road:道
f:id:raharu0425:20150428211135p:plain
Ladder:特殊道
f:id:raharu0425:20150428211147p:plain
Object:賑やかし
f:id:raharu0425:20150428211159p:plain

こうなります。

Colliderには侵入不可部分にオブジェクトを作成します。 f:id:raharu0425:20150428212054p:plain

こんな感じで出来上がり!

これを前回同様にUnityに読み込んで

raharu0425.hatenablog.com

ついでにキャラクタも置いてみます。

キャラクターはこちらを使わせて頂きました有り難うございます! こういうの配布してくださる方はもう神です。神としか言いようがありません!

usui.moo.jp

f:id:raharu0425:20150428212748p:plain

こんな感じ!?

あれ大変だこれだけで面白そう!!!(錯覚)
こう感じてしまうのはきっと素材がいいからでしょう!

RPGのイベントトリガーとか挙動関連はちょっとやっておきたいのはあるのですが、
まだ何作ろうか思い浮かびません企画者を緩く募集してます(笑)

次回は8方向移動のキャラクターコントローラの記事でも書こうかと思ってます。

【Unity】TileMapEditorで作ったデータをX-UniTMXで読み込ませる 其の2

5/19追記
X-UniTMXがil2cppでビルド出来ない現象を確認しましたのでこちらの記事は参考までにしてください。
最新のX-UniTMXであば対応されている可能性があります。

さて前回にマップの読み込みができたのですが、
今回はColliderの作成までしてみたいと思います。
これが出来れば簡易的な横スクロールアプリが作れるはずです。

そして、マップファイルを外だしに出来る事で
AssetBundleから新しいマップデータの読み込みも出来るので、
アップデート無しで新マップを追加したり夢がヒロガリングですね!!

マップ作成

とりあえずこんなマップを作成しました。

f:id:raharu0425:20150424113052p:plain

このマップに当たり判定を行うオブジェクトを付けて行きます。 f:id:raharu0425:20150424113255p:plain

名前は適当にGroundとでもしておきます f:id:raharu0425:20150424113329p:plain

Unityに読み込ませる

f:id:raharu0425:20150424113432p:plain

GenerateColliders / Prefabs?にチェックを入れて 作成するとColliderを持つオブジェクトができあがりました!!

f:id:raharu0425:20150424114503p:plain

キャラクターでも置いてみる

とりあえずデフォルトで入っているロボのアセット(2D)をインポートします。

f:id:raharu0425:20150424113802p:plain

これでCharacterRobotBoyのプレハブを探し画面上に起きます。

f:id:raharu0425:20150424113900p:plain

こんな感じ

このプレハブにはすでにコントローラーが入っているので置いただけで動くはずです。

カメラをフォローさせる

今のままではキャラクターが見きれてしまうので
X-UniTMX ExamplesについているCamera Folow2D スクリプトをカメラにアタッチします。

f:id:raharu0425:20150424114255p:plain f:id:raharu0425:20150424114308p:plain

実際に動かしてみる


TileMapEditorで作ったデータをX-UniTMXで読み込ませる - YouTube

いい感じです。
TileMapEditorで吐き出したxmlファイルをUnityにうまく取り込めました。
とここまで分かりやすく横スクロールつくってきましたが、
別に横スクロールゲームを作りたい訳じゃないので次はRPGマップを作りたいと思ってます。

【Unity】TileMapEditorで作ったデータをX-UniTMXで読み込ませる 其の1

5/19追記
X-UniTMXがil2cppでビルド出来ない現象を確認しましたのでこちらの記事は参考までにしてください。
最新のX-UniTMXであば対応されている可能性があります。

最近ゆに☆アニのリリース作業で全く更新が止まっていたブログですが
そろそろ次のアプリを作りたいのでその下調べでもやろうかと思っています。

前にCocos2d-xでTileMapEditorを使ってマップを読み込むってのをやっていたのですが、
Macで使えてかつUnityに取り込めるタイルマップエディタってのが良いのが無くて
TileMapEditorをなんとか使いたいなぁと思って調べてみました。

Cocos2dx 3.0 TielMapEditor Tieldを使ってマップを作成する - とあるプログラマの備忘録

tiledの使い方も書いた

2014/05/29 15:44

それでは早速

Unity2Dプロジェクトを作成する

特に説明の必要は無いですね。
今回のプロジェクトからUnity5.xを使用しています。

タイルマップエディタの最新版を取得

Tiled Map Editor f:id:raharu0425:20150422121439p:plain

このとき使用しているバージョンは0.11.0になります。

タイル画像を用意して、適当にタイルを置いて行く

f:id:raharu0425:20150422121523p:plain

32px x 32pxのタイルチップ画像を用意します。

その後適当に置いてゆきます。 設定は以下の通り

f:id:raharu0425:20150422121714p:plain

こんな感じでつくってみました

f:id:raharu0425:20150422121932p:plain

これをTileMap001.tmxとして保存しておきましょう。

X-UniTMXのをUnityにインポートする

タイル情報をいい感じにしてくれるX-UniTMXを入れます。

Chaoseiro / X-UniTMX / Downloads — Bitbucket

X-UniTMX v1.7.1.unitypackageが落ちてくるのでUnityにインポートします。

f:id:raharu0425:20150422122354p:plain

なんか色々入ってきていますが、とりあえず気にしないで置いておきます。

TileMap001.tmxを複製して拡張子xmlにする

f:id:raharu0425:20150422122853p:plain

xmlとタイルチップ画像をResource以下に入れる

f:id:raharu0425:20150422122902p:plain

必ずResource以下に入れないと行けません。

UnityのGameObject > Create Other > Tiled Game Mapでオブジェクトを作成する

f:id:raharu0425:20150422123137p:plain

そうするとこんなオブジェクトが作成されます

f:id:raharu0425:20150422123218p:plain

マップデータを読み込ませる

f:id:raharu0425:20150422123513p:plain

先ほどのxmlを読み込ませて、Reload XMLMAPを押下
(マテリアルにはDefaultSpriteMaterialをアタッチしておきます)

その後Import as static Tile Mapを押下するおと

f:id:raharu0425:20150422123618p:plain

読み込まれました!!!

今後当たり判定とかもう少し踏み入れて行きたいですが、
とりあえずMAPが読み込めてほっとしました。