【ハルシオンブログ】タイルマップを使ってみた。意外と簡単にできるんすね。
こんにちは!坂内っす。
もう次の日曜日にはデジゲー2018っすね!
ブースの皆さん頑張って準備してくださいな!
さてさて、本日のUnityのお話はタイルマップについて。
Unity2017.2くらい?から導入されたタイルマップなんですが、今まで触ってもなかったので、ここで触ってみようかなと。
タイルマップとは?
タイル(英: tile)は、建設資材の一つで、壁や床の保護、あるいは装飾用に多数張りつける板状のもの。
+
地図、マップ
ってことで、ゲームの画面をタイルで並べるように作る機能のようです。
さてさて、アセットストアにもいろいろとタイルマップで使えるマップチップのアセットがあるようです。
今回はこれを使ってみました。

まずはタイルパレットを作成します。
あ、ちなみに使用しているUnityは2018.2.1です。バージョンによって多少コマンドの位置が変わるかも?

Tile Paletteを選択するとウインドウが出てきます。
出てきたウインドウの「Create New Palette」を押して、Nameにパレット名を入力し、「Create」を選択。

そうすると、今付けた名前のパレットプレハブができます。

次に使用するテクスチャを選択し、設定します。
今回はこれを使ってみましょう。

Bricksってファイルです。
Sprite Modeを「Multiple」に変更します。
Pixel Per Unitの数値をタイルのサイズにします。
チップが16x16だった場合は16を入力します。(今回は32x32だったので、32を入力)

そして「Sprite Editor」ボタンを押す!
SpriteEditorの画面で「Slice」ボタンを押し、出てきたウインドウでTypeを「Grid By Size」へ変更。
PixelSizeを32,32に設定し「Slice」ボタンを押す。

テクスチャが32x32で白い線で切られると思います。
これでウインドウの右上にあるxを押してApply。
これで、テクスチャの準備は完了です。
次に、今のBrickファイルをTilePaletteウインドウにドラッグ&ドロップします。

これで完成です。
次にタイルマップを画面に置いてみましょう。
「GameObject」⇒「2D Object」⇒「Tilemap」を選択します。

そうすると、Hierarchyに「Grid」というオブジェクトが作成されます。
このGridを選択すると、Sceneウインドウに白い線が出るようになります。

この状態で、TilePaletteで好きなチップを選択、クリックやドラッグでタイルを配置できます。

Shift+ドラッグ(クリック)で削除できます。
また、"「"ボタン、"」"ボタンを押すことでタイルを回転できます。
さて、このままだとこうなっちゃいます。

そうです。コライダーが付いていないのですり抜けちゃう!
コライダーの付け方は簡単です。
Hierarchyにある「Tilemap」に「TilemapCollider2D」を付けます。

これでキャラがちゃんとぶつかるようになります。

こんな感じ。
簡単にTilemapって使えるんですね!
今度何かにつかってみよう!
ということで、今日はこれであでゅ~ノシ
もう次の日曜日にはデジゲー2018っすね!
ブースの皆さん頑張って準備してくださいな!
さてさて、本日のUnityのお話はタイルマップについて。
Unity2017.2くらい?から導入されたタイルマップなんですが、今まで触ってもなかったので、ここで触ってみようかなと。
タイルマップとは?
タイル(英: tile)は、建設資材の一つで、壁や床の保護、あるいは装飾用に多数張りつける板状のもの。
+
地図、マップ
ってことで、ゲームの画面をタイルで並べるように作る機能のようです。
さてさて、アセットストアにもいろいろとタイルマップで使えるマップチップのアセットがあるようです。
今回はこれを使ってみました。

まずはタイルパレットを作成します。
あ、ちなみに使用しているUnityは2018.2.1です。バージョンによって多少コマンドの位置が変わるかも?

Tile Paletteを選択するとウインドウが出てきます。
出てきたウインドウの「Create New Palette」を押して、Nameにパレット名を入力し、「Create」を選択。

そうすると、今付けた名前のパレットプレハブができます。

次に使用するテクスチャを選択し、設定します。
今回はこれを使ってみましょう。

Bricksってファイルです。
Sprite Modeを「Multiple」に変更します。
Pixel Per Unitの数値をタイルのサイズにします。
チップが16x16だった場合は16を入力します。(今回は32x32だったので、32を入力)

そして「Sprite Editor」ボタンを押す!
SpriteEditorの画面で「Slice」ボタンを押し、出てきたウインドウでTypeを「Grid By Size」へ変更。
PixelSizeを32,32に設定し「Slice」ボタンを押す。

テクスチャが32x32で白い線で切られると思います。
これでウインドウの右上にあるxを押してApply。
これで、テクスチャの準備は完了です。
次に、今のBrickファイルをTilePaletteウインドウにドラッグ&ドロップします。

これで完成です。
次にタイルマップを画面に置いてみましょう。
「GameObject」⇒「2D Object」⇒「Tilemap」を選択します。

そうすると、Hierarchyに「Grid」というオブジェクトが作成されます。
このGridを選択すると、Sceneウインドウに白い線が出るようになります。

この状態で、TilePaletteで好きなチップを選択、クリックやドラッグでタイルを配置できます。

Shift+ドラッグ(クリック)で削除できます。
また、"「"ボタン、"」"ボタンを押すことでタイルを回転できます。
さて、このままだとこうなっちゃいます。

そうです。コライダーが付いていないのですり抜けちゃう!
コライダーの付け方は簡単です。
Hierarchyにある「Tilemap」に「TilemapCollider2D」を付けます。

これでキャラがちゃんとぶつかるようになります。

こんな感じ。
簡単にTilemapって使えるんですね!
今度何かにつかってみよう!
ということで、今日はこれであでゅ~ノシ
【Unity】Unity&Orthelloによる2Dゲーム作成⑦
はい、こんにちわ坂内でっす。
Unity難しいでっす。
土曜出社してAndroidゲーム【モンスラ】バージョンアップしたでっす。
今回の目玉は必殺技の追加、クリティカルヒット追加、フェアリー追加でしたが、実は軽くなってるんです!
Drawcallが劇的に減ってるんですよ!
Ver1.1まではフルメンバー(村人200人+ユニット199人x6クラス)の場合、Drawcallが200ほど。
重いです!これ重いんですよ!
Ver1.1までは各クラスごとにAtlasを用意し、合計7Atlasを使用していました。
Ver2では少しでも軽くしようと、GUIまわりのAtlasを一つにしたり、ユニットのAtlasを1つにまとめたりしたところ、なんとDrawCall30!!!
この劇的変化!! DrawCall 200 ⇒ 30!!
ただし、スマホだとさすがにSpriteの多さが問題か、重いんです!
DrawCallの問題だけじゃあぁないっすね!!
今後軽くする方法を検討してみますが、ちょっとこれ以上はきついかな?
タップ時の攻撃エフェクトを他のAtlasと1つにしてみようという案は考えてますが・・
あと、Unity4.3によって2Dゲームまわりにどのような変化がくるか楽しみですね!!
と、いうことで今後もモンスラよろしくお願いします!
Unity難しいでっす。
土曜出社してAndroidゲーム【モンスラ】バージョンアップしたでっす。
今回の目玉は必殺技の追加、クリティカルヒット追加、フェアリー追加でしたが、実は軽くなってるんです!
Drawcallが劇的に減ってるんですよ!
Ver1.1まではフルメンバー(村人200人+ユニット199人x6クラス)の場合、Drawcallが200ほど。
重いです!これ重いんですよ!
Ver1.1までは各クラスごとにAtlasを用意し、合計7Atlasを使用していました。
Ver2では少しでも軽くしようと、GUIまわりのAtlasを一つにしたり、ユニットのAtlasを1つにまとめたりしたところ、なんとDrawCall30!!!
この劇的変化!! DrawCall 200 ⇒ 30!!
ただし、スマホだとさすがにSpriteの多さが問題か、重いんです!
DrawCallの問題だけじゃあぁないっすね!!
今後軽くする方法を検討してみますが、ちょっとこれ以上はきついかな?
タップ時の攻撃エフェクトを他のAtlasと1つにしてみようという案は考えてますが・・
あと、Unity4.3によって2Dゲームまわりにどのような変化がくるか楽しみですね!!
と、いうことで今後もモンスラよろしくお願いします!
【Unity】Unity&Orthelloによる2Dゲーム作成⑤
はいはーい 月曜の坂内っす。
ちょっとしたOrthelloを使用した時のコツを。
普通のオブジェクトの場合、iTweenを使用することで簡単に透明度を変更できます。
透明度を1⇒0⇒1と繰り返すことで、オブジェクトの点滅を実装することができます。
cubeというオブジェクトを作成し、マテリアルを張ります。
透過が可能なShaderを指定します。
そして、以下のコード書くことでcubeオブジェクトの点滅が可能になります。
上記コードの説明をしますと、「cubeオブジェクトの色要素 a (アルファは透過度)を2秒かけて0にする。
0になったら今度は2秒かけて1にする(pingpongによって動作を繰り返す)」となります。
これで簡単に点滅が可能です。
しかし!BUT!!!
OrthelloのSpriteは上記と同じことを行うとエラーがでてしまいます。
ナゼカ?
エラーをみると、Colorプロパティが無いといわれます。
そう、OrthelloのSpriteではShaderが「mobile/Particles/Alpha Blended」になるため、Colorプロパティが存在しないからです。
しかし、よく見るとOTSpriteの中に「Alpha」というプロパティが存在します。

これを0⇒1⇒0とすることで、点滅を実装することが可能です。
では、どのようにこれをいじるのか?
iTweenのメソッドには「ValueTo」というものが用意されています。
これは、値をaからbにするというもので、使い方は以下のように使います(たぶん)。
0から1まで2秒かけて変わる。

となります。
これを踏まえて、以下のようにコードを書けば・・・・
こんな感じで、OrthelloのSpriteを点滅することができます。
以上!なにかのお役に立てたらこれ幸い。
ちょっとしたOrthelloを使用した時のコツを。
普通のオブジェクトの場合、iTweenを使用することで簡単に透明度を変更できます。
透明度を1⇒0⇒1と繰り返すことで、オブジェクトの点滅を実装することができます。
cubeというオブジェクトを作成し、マテリアルを張ります。
透過が可能なShaderを指定します。
そして、以下のコード書くことでcubeオブジェクトの点滅が可能になります。
void Start(){ |
上記コードの説明をしますと、「cubeオブジェクトの色要素 a (アルファは透過度)を2秒かけて0にする。
0になったら今度は2秒かけて1にする(pingpongによって動作を繰り返す)」となります。
これで簡単に点滅が可能です。
しかし!BUT!!!
OrthelloのSpriteは上記と同じことを行うとエラーがでてしまいます。
Material doesn't have a color property '_Color' |
ナゼカ?
エラーをみると、Colorプロパティが無いといわれます。
そう、OrthelloのSpriteではShaderが「mobile/Particles/Alpha Blended」になるため、Colorプロパティが存在しないからです。
しかし、よく見るとOTSpriteの中に「Alpha」というプロパティが存在します。

これを0⇒1⇒0とすることで、点滅を実装することが可能です。
では、どのようにこれをいじるのか?
iTweenのメソッドには「ValueTo」というものが用意されています。
これは、値をaからbにするというもので、使い方は以下のように使います(たぶん)。
void Start(){ |

となります。
これを踏まえて、以下のようにコードを書けば・・・・
using UnityEngine; |
こんな感じで、OrthelloのSpriteを点滅することができます。
以上!なにかのお役に立てたらこれ幸い。
【Unity】Unity&Orthelloによる2Dゲーム作成④
こんにちわ。
坂内です。月曜休みということで火曜になっちゃいました。
ええと、Unityにおける「ボタン」についてちょっと私見を。
ボタンを画面に置きたい場合、GUI.Buttonを使うといいようなことが、色々なホームページでみることがあります。
で、使ってみたんですが、以下の問題が発生!
まずGUIを使うと画面に表示されなくて、分かりずらい!
実行しないと確認ができない!という感じに。
これ、OnGUIを使うクラスの上に、[ExecuteInEditMode]をつけると実行しなくても見えるようになりますね。
この問題は収束。
次の問題、画面解像度によって位置の変更や、サイズの変更。
そして文字サイズの変更が必要になる!
これ、ちょーめんどいです。
これ対応しないと、GalayxS3のような画面解像度が高い携帯だととんでもなくボタンも文字も小さくなってしまいます!
で、GUIやめました。
では、どのようにボタンを表現しているかといいますと、Orthelloの場合はSpriteを置いて、Rayを使用しています。
RayとRaycast。これ何かといいますと。
「空間内の指定した原点から特定の方向に伸びる線のことを光線と呼びます。光線は、その名前の通りのイメージです。空間上の任意の開始点から、特定の方向に無限に伸びる線を値として表現できます。」
どこかの引用。
ということで、タップした座標から奥に向けてビームを打ちます。
これにオブジェクトが当たったら「ボタン押した」とか「ボタン離した」の判定をします。
ボタン押した時と離した時の処理を書くことで、ボタンの動きを表現できます。
以下、ボタンの例です。
こんな感じでやってます。
説明をば。
初めの、
const int BTN_A = 0;
const int BTN_A_PUSH = 1;
ですが、これはテクスチャアトラスの番号です。
ボタン系の絵はすべてアトラスで管理しています。
0は押されていない時のボタンの絵。1は押されている時のボタンの絵になっていることを想定しています。
アトラスを使わず、別々のテクスチャとして用意した場合は以下のように書き換えて下さい。
変わった場所わかりにくいですかね。
OT.Sprite("btnTest").frameIndex ⇒ OT.Sprite("btnTest").texture
に変わりました。
それと、はじめのアトラスのインデックスがTexture2Dになりました。
これ、ボタンの絵をそれぞれアサインしといてください。
①ダウン時
ボタンのSpriteが押された時の処理として、フラグをたて、絵を変えます。
②おしっぱ時(そのボタンが押されているフラグが立っている時)
ボタンのSpriteがおしっぱの時は絵を押されたものとして表示しておきますが、
タップされたままボタン以外のところに指が行ってしまった場合は、フラグを落とし、絵も押されていない状態に戻します。
③離した時(そのボタンが押されているフラグが立っている時)
ここで実際の押された時の処理を書きます。
どうでしょう?ボタン押された時っぽい動きになりますよ!
ということで、ボタンこれでやってます。
他にいい案ありましたらご教授くださいませ!
以上!今日のブログでした!
坂内です。月曜休みということで火曜になっちゃいました。
ええと、Unityにおける「ボタン」についてちょっと私見を。
ボタンを画面に置きたい場合、GUI.Buttonを使うといいようなことが、色々なホームページでみることがあります。
で、使ってみたんですが、以下の問題が発生!
まずGUIを使うと画面に表示されなくて、分かりずらい!
実行しないと確認ができない!という感じに。
これ、OnGUIを使うクラスの上に、[ExecuteInEditMode]をつけると実行しなくても見えるようになりますね。
|
この問題は収束。
次の問題、画面解像度によって位置の変更や、サイズの変更。
そして文字サイズの変更が必要になる!
これ、ちょーめんどいです。
これ対応しないと、GalayxS3のような画面解像度が高い携帯だととんでもなくボタンも文字も小さくなってしまいます!
で、GUIやめました。
では、どのようにボタンを表現しているかといいますと、Orthelloの場合はSpriteを置いて、Rayを使用しています。
RayとRaycast。これ何かといいますと。
「空間内の指定した原点から特定の方向に伸びる線のことを光線と呼びます。光線は、その名前の通りのイメージです。空間上の任意の開始点から、特定の方向に無限に伸びる線を値として表現できます。」
どこかの引用。
ということで、タップした座標から奥に向けてビームを打ちます。
これにオブジェクトが当たったら「ボタン押した」とか「ボタン離した」の判定をします。
ボタン押した時と離した時の処理を書くことで、ボタンの動きを表現できます。
以下、ボタンの例です。
|
こんな感じでやってます。
説明をば。
初めの、
const int BTN_A = 0;
const int BTN_A_PUSH = 1;
ですが、これはテクスチャアトラスの番号です。
ボタン系の絵はすべてアトラスで管理しています。
0は押されていない時のボタンの絵。1は押されている時のボタンの絵になっていることを想定しています。
アトラスを使わず、別々のテクスチャとして用意した場合は以下のように書き換えて下さい。
|
変わった場所わかりにくいですかね。
OT.Sprite("btnTest").frameIndex ⇒ OT.Sprite("btnTest").texture
に変わりました。
それと、はじめのアトラスのインデックスがTexture2Dになりました。
これ、ボタンの絵をそれぞれアサインしといてください。
①ダウン時
ボタンのSpriteが押された時の処理として、フラグをたて、絵を変えます。
②おしっぱ時(そのボタンが押されているフラグが立っている時)
ボタンのSpriteがおしっぱの時は絵を押されたものとして表示しておきますが、
タップされたままボタン以外のところに指が行ってしまった場合は、フラグを落とし、絵も押されていない状態に戻します。
③離した時(そのボタンが押されているフラグが立っている時)
ここで実際の押された時の処理を書きます。
どうでしょう?ボタン押された時っぽい動きになりますよ!
ということで、ボタンこれでやってます。
他にいい案ありましたらご教授くださいませ!
以上!今日のブログでした!
【Unity】Unity&Orthelloによる2Dゲーム作成③
はい、こんにちわ。坂内です。
本日の題は「Unity&Orthelloによる2Dゲーム作成其の3」です。
アニメーションについて、ちょちょっと書いてみます。
Orthelloには、AnimatingSpriteというものがあります。
これ、アニメーション用のSpriteっぽいっす。
オブジェクトとしては、コレ使います。
では順番に説明をば。(間違えていたら指摘プリーズ!
①「Orthello」⇒「Sprite」⇒「Animation」をHierarchyに追加します。
このAnimationはSpriteのアニメーション自体を管理するもののようです!

②今回はこんな感じの適当な絵を用意しました!

立ち絵・パンチ・キックの3種類のアニメーションです。(適当でスイマセン
これをまずは前々回の通りSpriteAtlasに読み込みます。
SpriteAtlasについては前々回の「Unity&Orthelloによる2Dゲーム作成①」を参照。
③次に、①で追加したAnimationのInspectorのFramesetsをアニメーションの数設定します。
今回は「立ち」「パンチ」「キック」の3種類のため、FramesetsにSizeに「3」を設定。
Sizeに3をセットすることにより、その下にElementsが3個追加されます。
それぞれのElementsのNameにアニメーション名を設定します。今回は「stand」「punch」「kick」に
してみます。

④各種アニメーションに、どの絵を使うかを指定します。
③で作成したElementsのContainerに②で指定したAtlasを指定します。
それと、スタートフレーム、エンドフレーム(アニメーションのフレームを指定)
立ちポーズはSpriteAtlasでは、8,9,10,11,12の絵になるので、Start Frameに「8」を、
End Frameに「12」を指定します。
⑤で、アニメーションの指定はスクリプトで「OT.AnimatingSprite("オブジェクト名").Play("アニメーション名");」とすることで動かすことができます。
⑥では、スペースボタンを押すとキックをするようにしてみましょう。
なんかそれっぽくなりましたね!
これ、キックのアニメのあと、止まってしまうけど、もとのStandアニメーションにするのはどうするんだろうか!
キックのアニメーションが終わったタイミングでうまくスタンドのアニメーションに戻す方法なにかいい方法をお持ちの方教えて下さい!
ってことで、本日のブログは終了です!
本日の題は「Unity&Orthelloによる2Dゲーム作成其の3」です。
アニメーションについて、ちょちょっと書いてみます。
Orthelloには、AnimatingSpriteというものがあります。
これ、アニメーション用のSpriteっぽいっす。
オブジェクトとしては、コレ使います。
では順番に説明をば。(間違えていたら指摘プリーズ!
①「Orthello」⇒「Sprite」⇒「Animation」をHierarchyに追加します。
このAnimationはSpriteのアニメーション自体を管理するもののようです!

②今回はこんな感じの適当な絵を用意しました!

立ち絵・パンチ・キックの3種類のアニメーションです。(適当でスイマセン
これをまずは前々回の通りSpriteAtlasに読み込みます。
SpriteAtlasについては前々回の「Unity&Orthelloによる2Dゲーム作成①」を参照。
③次に、①で追加したAnimationのInspectorのFramesetsをアニメーションの数設定します。
今回は「立ち」「パンチ」「キック」の3種類のため、FramesetsにSizeに「3」を設定。
Sizeに3をセットすることにより、その下にElementsが3個追加されます。
それぞれのElementsのNameにアニメーション名を設定します。今回は「stand」「punch」「kick」に
してみます。

④各種アニメーションに、どの絵を使うかを指定します。
③で作成したElementsのContainerに②で指定したAtlasを指定します。
それと、スタートフレーム、エンドフレーム(アニメーションのフレームを指定)
立ちポーズはSpriteAtlasでは、8,9,10,11,12の絵になるので、Start Frameに「8」を、
End Frameに「12」を指定します。
⑤で、アニメーションの指定はスクリプトで「OT.AnimatingSprite("オブジェクト名").Play("アニメーション名");」とすることで動かすことができます。
using UnityEngine; |
⑥では、スペースボタンを押すとキックをするようにしてみましょう。
|
なんかそれっぽくなりましたね!
これ、キックのアニメのあと、止まってしまうけど、もとのStandアニメーションにするのはどうするんだろうか!
キックのアニメーションが終わったタイミングでうまくスタンドのアニメーションに戻す方法なにかいい方法をお持ちの方教えて下さい!
ってことで、本日のブログは終了です!
| h o m e |