MotunabeLove’s blog

色々なことを書いていきます。

PC最強ドット絵作成ツール ~Aseprite~

私が描いたものです

 

 

 

どうもお久しぶりです。もつです。

私がPCでドット絵を描くために使用しているツールに「Aseprite」というツールがあるのですが、このツールにはドット絵を描くためのあらゆるシステムがありドット絵を描くのに最適なツールとなっています。

 

私はもともとPhotoshopというツールでドット絵を描いていたのですが、如何せんドット絵を描くことに適していないツールだったので、アニメーションなどを作成するのがかなりめんどくさかったのですが、

Asepriteはそういった面倒な要素が無く、かなり快適に使うことができます。

 

 

今回はその「Aseprite」について解説していきたいと思います。

 

 

1つ目のメリット:わかりやすいUI!

これなんですよ、これこれ!

 

UIがシンプル且つかわいいデザインになっていて、とてもキャッチーで見ただけで大体どんなツールなのかわかるぐらいのわかりやすいデザインとなっているんです!

 

そして、UI自体もドット絵になっており、ツール開発者のドット絵に対する愛が伝わってきます。デザインがかわいいので気分も上がりますね!

 

 

 

2つ目のメリット:使いやすいアニメーション機能!

 

この機能がこのツールの真骨頂といっても過言ではないぐらい素晴らしい機能となっています!

 

Photoshopでアニメーションを作ろうとすると、絵を描いて、フォルダーごとに分けて、そのフォルダーの順番通りにアニメーションのフレームが作成されるので、もしフレーム数が100枚にもなるとフォルダーを100個管理しなければならなくなるので、調整が大変になるんですね。

 

しかしこれがAsepriteだと、簡単にアニメーション管理ができるようになります。

上記の画像の白い丸と黒い丸が一つ一つの絵で、これをドラッグ&ドロップするだけで絵の移動や入れ替えができるので、フレーム管理が楽になります。

 

 

 

3つ目のメリット:直線のナビが表示される!

 

Photoshopで直線を引こうと思うと、どこにどんな風に引かれるのかわからないので、一度引いてみないとわからないのですが、

 

これがAsepriteだと直線を引く際にラインが表示されるのでどんな線でどんなところに引かれるのかわかるので非常に便利です。

 

 

 

4つ目のメリット:拡張機能

 

Asepriteには外部から拡張機能をダウンロードして使用することができます

 

拡張機能の中にはフレームを追加してアニメーションを補間してくれるものだったり、影やライトをワンボタンで追加してくれるものがあったりと、非常に便利なものが沢山あります。

 

thkaspar.itch.io

導入自体も簡単なので是非導入してみてください。ドット絵生活が豊かになります!

 

 

 

5つ目のメリット:PixelPerfect機能!

「PixelPerfect機能」?なんやそれ。と思うかもしれませんがPixelPerfect機能というのは、線を1ドットずつ設置できるという機能になります。

 

どういうことかといいますとPixelPerfect機能を使わずに線を引くと下記のように線が太くなってしまいます。

 

 

しかし、PixelPerfect機能を使うと下記のように綺麗に線が引けるようになるのです。

 

 

 

 

6つ目のメリット:曲線を引くツールがある!

 

ドットで曲線を引こうとすると1ドットずつ気を配らなければ綺麗に引けないのですがAsepriteの場合、曲線ツールを使えば1発で引くことができるようになるのです。

 

 

 

まとめ

Asepriteには便利な機能が沢山備わっており、

ドット絵を描くうえで非常に便利なものになるので是非使ってみてください。

きっと、ドット絵を描くのが好きになるでしょう。

store.steampowered.com

 

 

以上、

もつでした!

Unity超絶初心者講座 ~Unity Asset Store活用術~

どうも、もつです!

今回はUnity Asset Storeの活用法ということで、Unity Asset Storeを使うと描くのが大変なキャラクターやオブジェクトのアセットをダウンロードするだけで使えたり、書くのが面倒くさいスクリプトも1行で済むようになったりなど、非常に便利なものになっているので是非活用していきましょう!!

 

Unityの画面が開いたらまずWindowsをクリックしてAssetStoreを開きましょう。

Windows→AssetStore

開いたら自分の欲しいアセットを探していきます。今回は下記のAssetにしようと思います。

assetstore.unity.com

そしてマイアセットに追加を押しましょう。

これでアセットに追加されました。

次はダウンロード&インポートの方法を書いていきます。

まずはUnityに戻りましょう。

Unityに戻ったらWindowsからPackageManagerを開きましょう。

Window→PackageManager

PackageManagerが開いたらPackagesの部分をMyAssetに変えて、先ほどマイアセットに追加したアセットを探します。

見つけたら右下のDownloadを押し、DownloadからImportに変わるのでImportをクリックします。これで自分のプロジェクトにアセットを追加することができました。

 

今回の記事は以上になります。お疲れ様でした!

Unity初心者講座 ~Tilemap設置方法編~

どうも!もつです!

今回はTilemapの設置方法についてご紹介していきたいと思います。

それではやっていきましょう!

 

まずはUnity Asset StoreなどでTilemapのAssetを探してProjectにImportしましょう。

今回はこちらのAssetを使用しました。かわいらしいデザインで素晴らしい。

assetstore.unity.com

 

Unity Asset Storeでマイアセットに追加したAssetをDownloadしてProjectにImportしていきます。

Window→PackageManager

左上のタブをMyAssetにして、右下のDownloadを押した後Importを押す

 

次はTilemapを設置するためのパレットを用意します。

これで絵を描くためのパレットができるわけです。

Window→2D→TilePalette

すると下記のような画面に。

TilePaletteの画面

もしTilePaletteに上記のような絵がない場合の対処法は。

何も絵がないパレット

上記のパレットにSpriteSheetからSpriteをドラッグ&ドロップで持ってきて張り付ける。

パレットにProjectからドラッグ&ドロップで持ってくる

 

次にHierarchyの左上の+をクリックし、Tilemapを設置します。

これで絵を描くためのキャンバスができるというわけです。

2DObject→Tilemap→Rectangular

 

こんな感じのグリッドが表示される

 

設置したいTilemapをクリックして取り敢えず地面を書いてみよう。

ブラシツールのようにTilemapを描くことが可能。

 

これでTilemapの設置完了となります。もし、当たり判定をつけたい場合は下記の画像の通りにすれば当たり判定が付きます。

HierarchyのTilemapのInspectorのAddComponentをクリックしてTilemapCollider2DをInspectorに追加します。

これで地面を作ることができました。やったね!

 

今回は以上になります。お疲れ様でした!

Unity初心者向け講座 ~アニメーションをアニメーターで管理しよう編~

 

スマートフォン・PCに対応したアフィリエイトのA8.net

こんばんは、もつです!

 

今回はAnimatorでAnimationを管理しようということで、この方法を使えばキャラクターの待機モーションや走るモーション、攻撃モーションなどのアニメーションを制御することが可能になります。

 

それではやっていきましょう!

 

まずは画面上部のウィンドウからAnimatorを開きましょう。

Window→Animation→Animator

 

するとこのような画面が出てきたと思います。

Animatorの画面

 

上記の画面を使いアニメーションを管理していきます。

(今回は前回のコインじゃなく、こうもりのキャラクターを使用します)

現状アニメーションが一つしかない(待機モーションしかない)ので、攻撃モーションを追加していきたいと思います。

 

それではまずAnimationウィンドウを開きましょう。そしてPreviewの下のBat_Idleの部分をクリックして、CreateNewClipをクリックして名前を決めましょう。今回はBat_Attackとします。

Bat_Idle→CreateNewClip→Bat_Attack

 

次に前回と同じようにSprite EditorでSliceしたアニメーション画像をドラッグ&ドロップで持ってくる。

 

 

motunabelove.hatenablog.com

 

 

ここでAnimatorウィンドウを開きます。そうすると下記の画面のようにさっき自分が決めた名前の灰色の四角がAnimationウィンドウに出てきます。そうなっていれば成功です。

オレンジの四角の下に灰色の四角

 

オレンジの四角が待機モーションのアニメーションで、灰色の四角が攻撃モーションです。今回は待機モーションから攻撃モーションに遷移したいと思います。

 

オレンジの四角を右クリックしてMake TransitionをクリックしたあとにBat_Attackをクリックします。そうするとBat_IdleからBat_Attackへの矢印が作成されたかと思います。

これがアニメーション遷移です。

Bat_Attackも右クリックしてMake TransitionでBat_Idleに矢印作成

 

しかしこのままでは何をしたときに待機から攻撃に遷移するのかわからない状態なので、どういったときに遷移をするのか決めていきます。

 

今回はJキーを押したときに攻撃モーションに遷移するようにしたいと思います。

Layerの横にあるParamaterをクリックして+のマークをクリックし、boolを選択して名前を決めます。(攻撃をするか?なのでIsAttack)

 

 

 

そして、先ほど作成した白い矢印をクリックし、Inspectorに表示されたConditionsの+をクリックします。

Inspectorの下のほうにConditionsがある

 

 

 

逆の矢印には同じように+をクリックした後に、trueの部分をfalseにしておきます。

これでAnimatorの部分は完成です。次はScriptに移っていきたいと思います。

 

まずはProjectでC#Scriptを作成します。Projectで右クリックしてCreate、C#Scriptクリック。

 

そして下記のようなC#Scriptを作成し、ダブルクリックしVisualStadioを起動します。

右側の緑のやつ

 

そして下記のように記述します。

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Bat : MonoBehaviour
{
    Animator anim;
    bool IsAttack;

    // Start is called before the first frame update
    void Start()
    {
        anim = gameObject.GetComponent<Animator>();
    }

    // Update is called once per frame
    void Update()
    {
        anim.SetBool("IsAttack", IsAttack);

        if(Input.GetKeyDown(KeyCode.J))
        {
            IsAttack = true;
        }

        if(Input.GetKeyUp(KeyCode.J))
        {
            IsAttack = false;
        }
    }
}

GetKeyDown = 押している間

GetKeyup = 離したとき



IsAttackの部分は先ほど自分で名前を決めた部分です。なので人によってはIsAttackではないです。

これでJキーを押している間は攻撃モーション。Jキーを離すと待機モーションに戻るという処理になります。

このスクリプトを設定するためにキャラクターの画像から適当な画像を一枚Hierarchyにドラッグ&ドロップで持ってきて、その画像にスクリプトをドラッグ&ドロップで持ってください。

 

最後に再生ボタンを押して確認してみましょう。

これにてAnimatorでAnimationを管理できるようになりました。

 

私自身こういったことを書くこと自体慣れていないので、至らない点があればコメントでおっしゃってください。

できる限り返したいと思います。

 

お疲れさまでした!

Unity初心者向け講座 ~アニメーションを再生しよう編~

 

こんばんは!もつ鍋です。

 

今回もUnityの初心者の初心者による初心者のための初心者講座をしていきたいと思います。今回はアニメーション編ということでキャラクターやプレイヤーをアニメーションさせるような方法をお伝えしたいと思います。

 

それではまず、下記のようなスプライトシート(絵が並んでいるアニメーションさせるための画像)を用意します。画像の見た目は何でも可。

 

そしてProjectに入っている上記の画像をクリックしてInspectorに画像の情報を表示させます。そしてInspectorのSprite ModeをMultipleにしてSprite Editorをクリックします。

 

そうしたら下記のような画面になると思いますので、左上のSliceをクリックし、TypeのAutomaticallyをGrid By cell Sizeにします。

 

そして、PixelSizeのXとYに絵一枚分のサイズの値を入力します。今回の場合はコイン一枚の画像サイズが32x32なのでXに65、Yに64と入力します。

↑白い線が入りスライスされたことがわかる。

 

スライス出来たら右上のApplyをクリックします。

スライスしたもの

 

そうしたらスライスした画像の一枚をHierarchyにドラッグ&ドロップします。

ドラッグ&ドロップしたもの

次にHierarchyにドラッグ&ドロップした画像をクリックします。そうすると、AnimationウィンドウにCreateというのが出てくるのでCreateをクリックします。Animationウィンドウがない場合は、上にあるWindowからAnimationをクリックすると出てきます。

Window→Animation→Animation

Createをクリック

 

Createをクリックするとウィンドウが開くので好きな名前を入力し、Enterを押しましょう。そうすると下記のような画面になったかと思います。

 

ここに先ほどスライスした画像を全て選んでドラッグ&ドロップで持ってきます。

持ってくると下記のようになります。

スライスした画像を全て持ってきた図

もしアニメーションの再生スピードを調整したい場合は、青いひし形のマークが並んでいる右側にある青いバーを長押ししながら右や左に動かしてみると全体的な間隔が広がります。こうすることで再生スピードを調整することが可能です。

間隔が広がっている

これで画面上部にある再生ボタンをおしてしっかりアニメーションが再生されるか確認しましょう。

上部の再生ボタン

これでアニメーションの再生は完了です。次回はアニメーションをアニメーターで管理し、スクリプトで制御する方法を書きたいと思います。

 

それではさようなら。

Unity初心者向け講座 ~SEを一括管理しよう編~

 

どうもこんばんは。もつです。

今回は便利なスクリプト編 ~SE一括管理の方法~ということで、

UnityでSEを一括管理する方法を記述しようと思います。

 

これがあればキャラ一人一人に設定しなくても大丈夫になるので

SE管理がとても楽になります。

書いてる私もそこまでUnityが得意なわけではないので温かい目で見てください。

 

スクリプトは下記に。

 

1:static public SE instance;
2:public AudioSource ???;
3:    private void Awake()
    {
        if(instance == null)
        {
            instance = this;
            DontDestroyOnLoad(gameObject);
        }
        else
        {
            Destroy(gameObject);
        }
    }
4:AudioSourceのみインスペクターに追加

 


5:SE.instance.???.Play();

 

1~4のスクリプト空のオブジェクトに入れて使用してください。

5行目のスクリプト流したい部分のスクリプトに書いてください。

???にはRun、IdleなどのつけたいSEの名前を入れてください。

 

void update()

{

  if(Input.GetKeyDown(KeyCode.A))

  {

    SE.instance.???.Play();

  }

}

 

という風な感じで。

 

それでは今日はこの辺でさいなら。

 

エル・プサイ・コングルゥ

最近シュタインズゲートにはまってますw

かぐや様とゲームの関連性

こんばんは。本日2回目の更新です。

 

私最近久しぶりに恋愛アニメを見まして、

そのアニメというのも

かぐや様は告らせたい」というアニメなのですが、このアニメが非常に面白い!

 

何が面白いのかというと「恋愛アニメを観ているのにバトルアニメを観ているような興奮」を味わえるのです!

あまりにも面白くて一気見してしまいました。

 

物語のあらすじとしては、

 

名門私立高校、秀知院学園の生徒会室。頭脳明晰な生徒会会長・白銀御行と文武両道で大財閥令嬢の副会長・四宮かぐやは、実は互いに惹かれ合っていたが、高すぎるプライドが邪魔をして告白できないまま、いつしか自分から告白したら負けという歪んだ思い込みに囚われてしまっていた。そんな2人は、なんとかして相手に告白させようと、超高度な恋愛頭脳戦を繰り広げていく。

 

という今まで存在していなかった、なんとも珍しい物語となっています。

とても人気なアニメなだけはありますね!

 

これはどんな物でも一緒だと思っています。

ゲームでもグッズでもなんでもです。

 

ゲームの場合新しいコンセプトやアイデア、機能が備わっているゲームの場合よく売れる傾向にあります。

 

私もプランナーを目指す人間なのでかぐや様のようなまだ見ぬ新しいコンセプトなどを探していこうと思います。

 

今回はこれぐらいで。