01 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.» 03

ハルシオンシステムの気ままBlog

株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

 

【Unity】NGUIでTweenしてみた。 

こんにちは~。
大坂でっす。

横浜辺りは明日17度まで上がって週末はまた9度とか8度になるみたいですね。ずっと雨ですし。
土曜は出かける予定があるから雨降らないでほしいなぁ。
と世間話はこの辺にして、今週の話題でっす。

Unityでオブジェクトとかを動かすのにずっとiTweenを使用して動かしていましたが、いつの間にかNGUIにも機能があることに気が付いたのでご紹介。(またまたよく見てませんでした。)

まずNGUIでSpriteを作成し、適当な絵を張り付けておきます。
作成したSpriteにメニューの「NGUI」⇒「Tween」⇒「Position」を追加します。






FromとToに値を設定して、動き始めの場所と動き終わった後の位置を指定
Animation Curve は動き方を指定。
Play Style
 Once : 1回だけ
 Loop : 繰り返し
 Ping Pong : 往復
Duration はアニメーション終了までの時間
Start Delay はアニメーション開始する時間をずらしたい場合に設定
Tween Group はTweenの種類を管理する
Ignore TimeScale はタイムスケールを無視
On Finished はアニメーション実行後に動かしたいメソッドの指定

といった感じの設定をするだけで動きます!簡単ですね!
ただiTweenのほうがやりやすい動きもありそうなので、全部NGUIのものでというわけにはいかないですけど。
とりあえず、Postion(位置)のほかにも
Alpha:透明度
Color:色
Width:横のサイズ
Height:縦のサイズ
Rotation:角度
Scale:スケール
辺りの変更であればNGUIのものを使用したほうが簡単にできそうなイメージですね!

では、今週はこの辺で。ノシ

スポンサーサイト

Category: 開発日記(Unity)

tb 0 : cm 0   

【Unity】テキストファイル読み込み? 

明日はあったかくなるようですね。
今日は雨が降るとか雪が降るとか言ってました。
いきなりの温度変化で風邪ひきやすくなりそうですね!みなさんお気をつけて!

以前髪の毛ピンクにしたって言いましたけど、色が落ちて茶色になりました。
短い期間でしたということで、毎度おなじみ月曜の坂内です。

ええと、テキストファイルなんかをUnityで使おうとしてたら嵌りました。
そこの対処法なんぞを、簡単に書いてみようかと思います。
え?テキストファイルなんか使わない?まぁまぁ そういわずに・・・

適当にAssetのフォルダの中に「Document」フォルダを作り、そこに「test.txt」を
置き、以下のようなコードを書いたところ・・・・


public class Test : MonoBehaviour {
public UILabel label;

void Start(){
string txtBuffer = "";
string textFileName = "test.txt";
string description = "";
string path = Application.dataPath + "/Document/" + textFileName;
FileStream file = new FileStream(path,FileMode.Open,FileAccess.Read);
StreamReader reader = new StreamReader(file);
while((txtBuffer = reader.ReadLine()) != null){
description = description + txtBuffer + "\r\n";
}
label.text = description;
}
}


普通に動くジャマイカ!

なーんだと思っていたとこ、Androidにいれたら動かない!!

いやー 嵌りました!

エラーを見るとこんなのが出てます。

IsolatedStorageException: Could not find a part of the path "/data/app/test.company-1.apk/Document/test.txt".

で、調べたところ、以下のようなことが書いてました。

で、streamingAssetsを使うことに?。
これはAssetsの直下に「StreamingAssets」というフォルダを置いて、ここいテキストファイルを配置します。
公式ではStreamingAssetsについて、以下のように書かれています。

「Unityプロジェクトにおける StreamingAssets と呼ばれるフォルダに配置したファイルはターゲットとするプラットフォームの特定のフォルダにそのまま保持されます。フォルダ名は Application.streamingAssetsPath プロパティを取得することが出来ます。参考のため、プラットフォームにより、このファイルのパスは異なります:」
詳細はこちら http://docs-jp.unity3d.com/Documentation/Manual/StreamingAssets.html

で、AndroidはWWWクラスを使えと。


using UnityEngine;
using System.Collections;
using System.IO;

public class Test : MonoBehaviour {
public UILabel label;
TextReader txtReader;
string description;

void Start(){
StartCoroutine("LoadText");
}

IEnumerator LoadText(){
string txtBuffer = "";
string textFileName = "test.txt";
string path = "";
#if UNITY_EDITOR
path = Application.streamingAssetsPath + "\\" + textFileName;
FileStream file = new FileStream(path,FileMode.Open,FileAccess.Read);
txtReader = new StreamReader(file);
yield return new WaitForSeconds(0f);
#elif UNITY_ANDROID
path = "jar:file://" + Application.dataPath + "!/assets" + "/" + textFileName;
WWW www = new WWW(path);
yield return www;
txtReader = new StringReader(www.text);
#endif
while((txtBuffer = txtReader.ReadLine()) != null){
description = description + txtBuffer + "\r\n";
}
label.text = description;
}
}


一応これで、PCでの起動はOKです。

ではAndroidで実行してみましょう・・

うごいた!!

ってことで、WWWを使うらしいです。

んで、その場合、yieldを使って、WWWでの取得を確認した後じゃないと、動かないので
こんな感じのコードになるのかなーと。

まぁ動くまで色々悩んで1日すぎちゃったのは過去のこと!

一応以上ですが、え?もっと簡単な方法あるよー!って情報持ってる方いましたら、
コメントなんぞで教えてくれると、泣いて喜びます!

アデュー!

Category: 開発日記(Unity)

tb 0 : cm 0   

【Java】ImageViewのアニメーション 

こんにちは。大坂です。

今週も雪予報でしたが、降りませんでしたね。よかった・・・ですが!
うちは家族がインフルで何やら大変なことになってます・・・。

さて今週の話題ですが、JavaアプリでのImageViewのアニメーションについてです。
まぁ使いどころはそれなりにあるのかなということでご紹介をば。

扱えるアニメーションは以下。
・移動【TranslateAnimation】
・透明度【AlphaAnimation】
・回転【RotateAnimation】
・スケール変更【ScaleAnimation】

と後は上記アニメーションを組み合わせて使用できる【AnimationSet】ですね。

では簡単に使い方を。

まずはImageViewの準備

XmlにImageViewを追加
<ImageView id="@+id/imageView"
android:src="@drawable/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

javaコードのXml読み込み後に
ImageView imageView = (ImageView)findViewById(R.id.imageView);


といった感じでImageViewを準備します。
まぁこの辺は基本なのでわかってる方ばかりでしょうが。

では以下アニメーションの使い方です。
移動【TranslateAnimation】

// TranslateAnimation(float fromX, float toX, float fromY, float toY)
// X方向に10、Y方向に20移動させる
TranslateAnimation transAnim = new TranslateAnimation(0f, 10f, 0f, 20f);
// 動作する時間を設定(ms)
transAnim.setDuration(2000);
// アニメーションを繰り返す回数を設定。指定しない場合は1回のみ。無限に繰り返す場合は‐1
transAnim.setInterpolator(new CycleInterpolator(10));
// 準備したImageViewでアニメーションを開始する。
imageView.startAnimation(transAnim);



透明度【AlphaAnimation】

// AlphaAnimation(float fromAlpha, float toAlpha)
// Alpha値を1~0.1にする。
AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.1f);
// 動作する時間を設定(ms)
alphaAnim.setDuration(3000);
// アニメーションを繰り返す回数を設定。指定しない場合は1回のみ。無限に繰り返す場合は‐1
alphaAnim.setInterpolator(new CycleInterpolator(-1));
// 準備したImageViewでアニメーションを開始する。
imageView.startAnimation(alpha);



回転【RotateAnimation】

// RotateAnimation(float from, float to, float pivotX, float pivotY)
// 360度回転。回転の中心X30、Y90の位置
RotateAnimation rotateAnim = new RotateAnimation(0, 360, 30, 90);
// 動作する時間を設定(ms)
rotateAnim.setDuration(1000);
// 準備したImageViewでアニメーションを開始する。
imageView.startAnimation(rotate);



スケール変更【ScaleAnimation】

// ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
// XYを2倍にする
ScaleAnimation scaleAnim = new ScaleAnimation(1,2,1,2, 0, 0);
// 動作する時間を設定(ms)
scaleAnim.setDuration(1000);
// アニメーションを繰り返す回数を設定。指定しない場合は1回のみ。無限に繰り返す場合は‐1
scaleAnim.setInterpolator(new CycleInterpolator(1));
// 準備したImageViewでアニメーションを開始する。
imageView.startAnimation(scale);



といった感じですね~。ちょいと動かしたい時なんかには使えるんじゃないですかね?

あと最後に複数のアニメーションを動かせる【AnimationSet】です。

// AnimationSet(boolean shareInterpolator)
AnimationSet animSet = new AnimationSet(true);
// 点滅アニメーションを設定
animSet.addAnimation(alphaAnim);
// スケール変化のアニメーションを設定
animSet.addAnimation(scaleAnim);
// アニメーションを繰り返す回数を設定。指定しない場合は1回のみ。無限に繰り返す場合は‐1
animSet.setInterpolator(new CycleInterpolator(1));
// 準備したImageViewでアニメーションを開始する。
imageViewstartAnimation(set);



では今週は以上です~。
また来週!ノシ

Category: 開発日記(Java)

tb 0 : cm 2   

【Unity】NGUIを使ったストーリー会話ウィンドウの作成!? 

こんにちは!月曜の坂内です。

みなさん元気にお過ごしでしょうか!?
金曜の雪もすごかったっすね!
帰れない人とかいたらしいっす。

また今週水曜とかに雪降りそうとか言われてますが、是非積もらない方向でお願いしたい!
交通機関麻痺がやばいっすからね!


はいっ!今日はよくある会話ウィンドウ?的なものをUnity+NGUIで作ってみましたので、
といっても、NGUIのサンプルにあったやつをちゃちゃっとパクってアレンジしたくらいですが!

ちなみにストーリーシナリオ書いてくれるライターさん募集です。
1,2kbくらいのショートなものなんですけどね!

あ、本題に入ります。

まずは~ 会話を流す場所を確保!

それと、しゃべってるキャラのSpriteと、ページ送りが分かりやすいように
矢印もつけときましょう。
Scriptはこのあと書きます。



で、次のプログラムをパクってきて・・・
using UnityEngine;
using System.Collections;

public class TypewriterEffect : MonoBehaviour {
public int charsPerSecond = 40;
UILabel mLabel;
string mText;
int mOffset = 0;
float mNextChar = 0f;

public void ResetText(){
mOffset = 0;
mNextChar = 0f;
}

void Update (){
if (mLabel == null){
mLabel = GetComponent();
mLabel.supportEncoding = false;
mLabel.symbolStyle = NGUIText.SymbolStyle.None;
mText = mLabel.processedText;
}
if (mOffset < mText.Length){
if (mNextChar <= RealTime.time){
charsPerSecond = Mathf.Max(1, charsPerSecond);
float delay = 1f / charsPerSecond;
if(mLabel.alpha == 0f){
mLabel.alpha = 1f;
}
char c = mText[mOffset];
if (c == '.' || c == '\n' || c == '!' || c == '?') delay *= 4f;
mNextChar = RealTime.time + delay;
mLabel.text = mText.Substring(0, ++mOffset);
}
}else{
GameObject.Find("Story").GetComponent().ViewArrow();
Destroy(this);
}
}
}

こんなクラスを作ります。
んで、こいつをラベルにくっつけときます。



で、一番あたまの「Story」に次ぎのクラスをつけときます。

using UnityEngine;
using System.Collections;

public class StoryController : MonoBehaviour {
public UISprite StoryCharaImage;
public UILabel StoryText;
public GameObject StorySet;
public UISprite Arrow;

int activeNo;
ArrayList activeStory;
bool pushArrowFlg;

void Start(){
StoryStart(1);
}

public void StoryStart(int storyNo){
switch(storyNo){
case 1:
StoryPart_1();
break;
}
iTween.ValueTo(gameObject,iTween.Hash("from",0,"to",1,"looptype",
iTween.LoopType.pingPong,"time",1f,"onupdate","BlinkArrow"));
}

void BlinkArrow(float value){
Arrow.alpha = value;
}

void StoryPart_1(){
activeStory = new ArrayList();
StoryCharaImage.spriteName = "chara";
MakeTestStory();
ProcStory();
}

void MakeTestStory(){
string testStory = "あいうえお かきくけこ \r\nわがはいはなんである?";
activeStory.Add(testStory);
testStory = "いやいや、テストストーリーである。
\r\n\r\nちゃんとうごいていますか?\r\nはい。";
activeStory.Add(testStory);
}

void ProcStory(){
// はじめは矢印消す.
Arrow.enabled = false;
activeNo = 0;
StoryText.text = (string)activeStory[activeNo];
StoryText.gameObject.GetComponent().ResetText();
activeNo++;
}

public void CloseStory(){
Destroy(StorySet);
}

public void ViewArrow(){
Arrow.enabled = true;
}

void Update(){
if(pushArrowFlg){
if(StoryText.gameObject.GetComponent() == null){
StoryText.alpha = 0f;
StoryText.gameObject.AddComponent();
Arrow.enabled = false;
StoryText.text = (string)activeStory[activeNo];
}
activeNo++;
pushArrowFlg = false;
}
}

public void TapStoryWindow(){
if(Arrow.enabled){
// 会話が終わっているか判定.
if(activeNo >= activeStory.Count){
CloseStory();
}
// 次の会話に進む.
pushArrowFlg = true;
}
}
}

んで、ラベルには次のように、Colliderとページ送り用のButton Messageをつけておきます。
MessageにはStoryControllerのTapStoryWindowメソッドを指定します。



で、StoryにつけたStoryControllerの各Publicの場所に、それぞれのオブジェクトをアサインしときます。



以上!

一応これで、それっぽい動きをしてくれます!
戻るとかは無いんですけどね・・・・

で、大事なのでもう一度言っておきます。
ストーリーシナリオ書いてくれるライターさん募集です。
1,2kbくらいのショートなものなんですけどね!

ストーリー自体はArrayListで管理してますが、実際はテキストファイルから
ストーリーを取り出して、ArrayListにぶっこむ感じでしょうか?
そんな感じでできました!

ということで、本日の開発ブログは終わり!

Category: 開発日記(Unity)

tb 0 : cm 0   

【Unity】NGUIの基本操作その9 

こんにちは。大坂です。

先週の土曜日に関東でもすごい雪が降りましたが、みなさん大丈夫でしたか?
私は日曜日に鎌倉いって雪では入れない場所とか見れない場所が多くてちょっと残念でした。
明日も雪の予報が皆さんお気をつけて通学通勤してくださいね。

さて、今週の話題です。
いままで簡単なぱらぱらアニメーションを作成するのにOrthelloを使用していたのですが、
NGUIでも簡単にできるので紹介を。

まずはぱらぱらアニメーションにする画像をUnityのプロジェクトに追加。
今回は以下の6個の絵を用意しました。(使用素材。臼井の会様:http://usui.moo.jp/frame2.html)




アニメーションさせる絵を前方一致で一意にできるような名前にしています。(今回はchar_1で始まる絵とchar_2で始まる絵を準備)
絵を入れたら「NGUI」⇒「Open」⇒「Atlas Maker」を使用してAtlasを作成します。
あとは以下のような構成で「Sprite」を作成し「Sprite」に作成したAtlasを紐づけてアニメーションさせたい絵を選択しておきます。



次に「Sprite」にComponent「UISprite Animation」を追加します。
「Component」⇒「NGUI」⇒「UI」⇒「Sprite Animation」





以上でアニメーション自体は動きますが、このままだと用意した全ての絵がアニメーションとして動いてしまうので、
「UISprite Animation」にある「Name Prefix」に「char_1」を指定すると「char_1」で始まる絵だけをアニメーションにしてくれます。



あとはFramerateを調整して絵を動かす速度などをちょうせいすれば、簡単にぱらぱらアニメーションが作れます。

あと番外ですが、この方法だと実際に用意した絵と同じ大きさに調整されるようなので、
絵の大きさを変えたい場合は「UISprite」にあるAnchorsのtypeを「Unifide」に設定して
中央からの大きさを指定することで絵の大きさも変わってくれます。
今回用意した絵は元の大きさが「32×32」ですが、以下の設定で「64×64」として表示されます。



アニメーション管理のためにOrthelloを使用しているところがありましたが、ちゃんと調べないとだめですね…orz

ではではまた来週~

Category: 開発日記(Unity)

tb 0 : cm 0   

モンスラ10,000DLと声優様 

こんにちは!火曜日にずれこんじゃった坂内です!

つつついに!モンスラのダウンロード数が10,000突破しました!!
ウェーブ!!\(≧▽≦)/\(≧▽≦)/ウェーブ!!

みなさん ありがとう ありがとう!
モンスラ遊んで頂いている皆様本当に感謝です!(o゚∀゚)ノ【☆.。.:*・゚アリガト゚・*:.。.☆】ヽ(゚∀゚o)

で、昨日は某声優さんと打ち合わせをさせて頂きました。
さすがですね!声素敵ですね!マジぱねっす!(゚∀゚lll)oO〇(スゲェ…)

次回作RPGでボイス使わせて頂く方向で話がすすんでいます!
皆様も是非楽しみに待って頂ければと思います!
俺もちょー楽しみなんすけどねっ!

全体的なプログラムは大体完成してきて、あとはデザインっ!
と、音楽と音と調整とストーリー!(やること多いっ!

ストーリーとか作るの興味ある方いませんかね?
長いストーリーじゃないので、大変じゃないと思いますが、
うちら素人には大変でっす!
大まかなストーリーは考えてはいるんですけどねえ・・・

興味を持ったかた是非メールを!!

ということで、本日はまたもや開発的な話じゃないまま終わりを告げようとしております。

アデュー!

Category: その他日記

tb 0 : cm 0   

【Java】システム設定周りについて 

こんにちは。大坂です。

今週になってまたすごく寒くなりましたね・・・。
日曜からまたちょっとあったかくなるみたいですが、気温差で体調を崩さないように気を付けてください。
(日曜、月曜と風邪ひいてましたけど。)

さて、今週もJavaの話題ですが弊社でリリースしているアプリでも使用していますが、
Androidで設定しているシステム設定についてです。
「Settings.System」を使用して値の取得と値の設定をすれば、
自分が必要な設定の確認と設定が簡単にできるアプリもすぐできてしまします。

まずは値取得の一例:
Settings.System.SCREEN_OFF_TIMEOUT:ディスプレイの消灯時間

取得方法
Settings.System.getString(getContentResolver(), Settings.System.SCREEN_OFF_TIMEOUT);
取得できる値はミリ秒です。(30秒で設定していたら3000が帰ってきます。)

次に値設定の一例:
同じくSettings.System.SCREEN_OFF_TIMEOUT

設定方法
// 消灯時間を10分に設定
Settings.System.putInt(getContentResolver(), Settings.System.SCREEN_OFF_TIMEOUT, 600000);
※消灯をなくす場合は「-1」を設定すると消灯しなくなります。

こんな感じで簡単取得も設定もできてしまします。
紹介したSettings.System.SCREEN_OFF_TIMEOUT(消灯時間)以外にもReferenceに色々載っているので参考にしていろいろ試してみください!

すみません。これで終わりです!
また来週!

Category: 開発日記(Java)

tb 0 : cm 0   

【Unity】NGUIを利用した画面のスクロール② 

こんにちは!月曜の坂内です。
さて、先週土曜日に髪の毛ピンクに染めました。ごめんなさい。

と、いうわけで、前回書いたNGUIによる画面のスクロール第2弾でございます。
今回はスクロールビューの中でアイテムを整理する方法と、スクロールバーの追加
をしていきたいと思います。

【アイテムの整理】
いくつかのアイテムをスクロールビュー内で並べたい場合には、
ScrollViewに「UIGrid」または「UITable」をつけます。
一列に並べる場合はGrid、行列で並べる場合はTableって考えてますが、
どうなんでしょ??

そして、今回は縦にスクロールしようと思うので、UIScroll Viewの「Movement」をVertical
に変更。それと、UIGridのArrangementもVerticalに変更します。
UIGridの「Cell Height」はアイテムの大きさ+隙間分αにしておきます。
SpriteのDimensionsのYが100(高さ100)のため、Cell Heightは102くらいにしておきます。

で、Gridを付けたらアイテム(今回はSprite)をコピーしまくります。



はい!そして実行!!



どうです?UIGridがいい具合に並べてくれます!
そしてスクロールもばっちし!
ちょー簡単!

【スクロールバー】
さてさて、スクロールバーをつけてみましょう。
上の続きです。
とりあえずスクロールバーに見た目をつけるために、1ドットの白と黒のpngを用意し、
Atlasにいれておきました。

んで、写真の手順でスクロールバーを作成します。
[NGUI]→[Open]→[Widget Wizard(Legacy)]→TemplateにScroll Barを設定し、
Background、Foregroundに先ほどの白と黒を設定。

Directionは上から下にバーを移動させたいのでTopToBottomを設定しました。




出来上がるのはこんなもの・・・・

ここから大きさ等を調整します。
あ、スクロールバーはスクロールビューの外の階層に作っておきます。

とりあえずこんな感じ?
そしたら、スクロールビューの「UIScroll View」にあるScrollBarの箇所に
今作ったスクロールバーを登録します。
今回は縦スクロールさせたいので、Verticalのところに登録します。





これだけ!これだけでスクロールビューとスクロールバーが連動します!
NGUIすごいっ!

ってことで、ネタ切れました。
皆様の役に立てるネタまた探さないと。。。

では!

Category: 開発日記(Unity)

tb 0 : cm 0