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】まだ口痛いっす。とりあえずuGUIでドラッグアンドドロップのやり方 その2 

こんにちは。坂内っす。

寒い日が続きますね。
タイトル通り、いまだに口内一部が痛いっす。

さて、前回の続きでUnityでのドラッグアンドドロップの話です。
前回はこちら”【Unity】まだ口痛いっす。とりあえずuGUIでドラッグアンドドロップのやり方 その1

前回はドラッグ側の処理を書きました。
今回はドラッグされる側、以下スクショで言うと、上側にある白い四角の方の処理です。

こんなコードを上の白い四角それぞれにつけます。

DropTarget.cs
using System.Collections;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class DropTarget : MonoBehaviour, IDropHandler {
public GameObject Item {
get {
if (transform.childCount > 0) {
return transform.GetChild(0).gameObject;
}
return null;
}
}

public void OnDrop(PointerEventData eventData) {
if (Item == null) {
// 何もないところへドラッグ
DragObject.dragObject.GetComponent().color = new Color(1f,1f,1f,0f);
DragObject.dragObject.transform.SetParent(transform);
} else {
// すでに何かあるところへドラッグ>入れ替え
// 元々あったものを元へ戻す処理
Item.GetComponent().color = new Color(1f,1f,1f,1f);
Item.transform.SetParent(Item.GetComponent().parentTransform);
// 新しくドラッグされてきたオブジェクトの処理
DragObject.dragObject.GetComponent().color = new Color(1f,1f,1f,0f);
DragObject.dragObject.transform.SetParent(transform);
}
}
}


※動きはクリックしてみてね!

こんな感じの動きになります。

ドラッグアンドドロップなので、ドロップしたら白い絵を変えるとかの処理にすれば、それっぽい感じになるかと思いますよ!
Hierarchyの動きを見ると分かると思うのですが、ドラッグしたアイテムは上のオブジェクトの子供になる感じになってます。
ただ、今のままだとドラッグされたオブジェクトの文字色を透明にしてるだけで、位置とか調整していないので、変に触れちゃったりします。
その辺はRaycast Targetいじって触れなくしたりとか、お好きに手いれてね!

先週のと合わせれば、これでドラッグアンドドロップが簡単に実装できます!

ってところで、あでゅ~ノシ
スポンサーサイト

Category: 開発日記(Unity)

tb 0 : cm 0   

【Unity】懲りずにカーソルネタだよ。カーソル変えてみたんだよ。 

こんにちは。
大坂です。

たまに目がかゆくなったり、鼻水が止まらなかったりと
今年も花粉の時期が近付いてる気がします…orz
嫌な季節です。

さて今週も懲りずにカーソルネタ。
Unityでのカーソルの変え方ですね。

ゲーム内で終始違うカーソルを使うのなら「PlayerSettings」の「DefaultCursor」に画像を設定すれば変わります。
ここを変えるとゲームを起動しないでもEditorのGame中にカーソルを持っていくとカーソルが変わります。


あと注意点は変更したいカーソルの画像の設定でTextureTypeを「Cursor」にしないと絵がうまく表示されません。


でまぁプログラムから特定のオブジェクトに入った時だけ変えたいとか。
こんな感じのプログラムをオブジェクトにつければいいのかな。
    public Texture2D cursor;

/// <summary>
/// オブジェクトに入った
/// </summary>
/// <param name="eventData">
public void OnPointerEnter(PointerEventData eventData) {
// カーソルを変更
Cursor.SetCursor(cursor, Vector2.zero, CursorMode.Auto);
}

/// <summary>
/// オブジェクトから出た
/// </summary>
/// <param name="eventData">
public void OnPointerExit(PointerEventData eventData) {
// カーソルをもとに戻す場合
Cursor.SetCursor(null, Vector2.zero, CursorMode.Auto);
}


第二引数のVector2.zeroを指定しているところはカーソルの当たる座標の指定です。
今の設定だと左上に当たる座標があるのでずらしたい場合はここに指定しましょう。
画像の中央にしたい場合は「new Vector2(cursor.width / 2, cursor.height / 2)」とかって指定すると
画像の中央で判定されます。

「public Texture2D cursor」にTextureTypeを「Cursor」にした画像をつけたら、
スクリプトを張り付けたオブジェクトにカーソルが当たったら画像が変更されます。
こんな感じ。


今週もこれで終わりですよ。
また来週ノシ

Category: 開発日記(Unity)

tb 0 : cm 0   

【Unity】まだ口痛いっす。とりあえずuGUIでドラッグアンドドロップのやり方 その1 

こんにちは!
親知らず抜いて、そろそろ1週間が経ちそうですが、いまだに縫った頬の内側が痛くて腫れてます・・・
歯抜いたところは大丈夫そうなんですけどね・・・・
まぁあと1週間もすれば痛みなくなるでしょう・・・

さて、Unityの話ですが・・・先週まともにUnity触ってないんす・・・

まぁ軽く。

uGUIにて、ドラッグアンドドロップを使う方法。
このネタ自体は他のブログさんを参照にさせて頂きました。

ただ、うまくいかなかったため、俺が勝手にいじった感じです。
まず第1回目はドラッグする側のオブジェクトについて。

こんな感じで画面を作ります。

上にある白い四角2つが、それぞれCanvas直下のdrop1とdrop2になります。
動かす方は、DragObjの下にあるdrag1~drag4になります。

まずは以下のコードを作成。

DragObject.cs
using UnityEngine;
using UnityEngine.EventSystems;

public class DragObject : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler {
public static DragObject dragObject;
public Vector3 initPosition;
public Transform parentTransform;
private CanvasGroup canvasGroup;
private Transform canvasTransform;

public CanvasGroup CanvasGroup { get { return canvasGroup ?? (canvasGroup = gameObject.AddComponent()); } }
public Transform CanvasTransform { get { return canvasTransform ?? (canvasTransform = GameObject.Find("DragObj").transform); } }

public int charaNo;

void Awake() {
initPosition = transform.localPosition;
}

public void OnBeginDrag(PointerEventData eventData) {
dragObject = this;
transform.SetParent(CanvasTransform);
CanvasGroup.blocksRaycasts = false;
CanvasGroup.alpha = 0.5f;
}

public void OnDrag(PointerEventData eventData) {
Vector3 posi = Input.mousePosition;
posi = new Vector3(posi.x - 240f,posi.y - 427f,0f);
transform.localPosition = posi;
}

public void OnEndDrag(PointerEventData eventData) {
if (transform.parent == canvasTransform) {
transform.SetParent(parentTransform);
}
dragObject = null;
CanvasGroup.blocksRaycasts = true;
CanvasGroup.alpha = 1.0f;
}

public void Update() {
if (dragObject == null) {
transform.localPosition = initPosition;
}
}
}


OnDragメソッドのポジションについては、画面のサイズ/2で計算してます。
今回は 横480x縦854で指定しているので、Vector3はnew Vector3(posi.x - 240f,posi.y - 427f,0f);となっています。

このコンポーネントを、各drag1~drag4につけます。
各オブジェクトの「public Transform parentTransform;」
には、DragObjをアサインします。

これでドラッグでオブジェクトが動くようになりました!いぇい!
※動きはクリックしてみてね!




とりあえず今日はこんな感じ!
次回はドロップ部分について書いていきたいと思います。

あでゅ~ノシ

Category: 開発日記(Unity)

tb 0 : cm 0   

【Unity】uGUIでマウスカーソルの位置にオブジェクトがあるか確認したかったよ 

こんにちは。
大坂です。

今週もネタというネタはないので、マウスネタ。
タイトルの通りですね。

確認はこんな感じ。
// PointerEventDataを作る
PointerEventData pointer = new PointerEventData(EventSystem.current);
// マウスポジションを渡す
pointer.position = Input.mousePosition;
// レイキャスト結果のリストを作成
List<RaycastResult> list = new List<RaycastResult>();
// レイを飛ばしてヒットするオブジェクトを取得
EventSystem.current.RaycastAll(pointer, list);
// オブジェクトがヒットしたか
if(list.Count > 0) {
// なんか処理させる
}


これでlistの中にヒットしたオブジェクトが入ってるわけですが、
マウスの位置にある「RaycastTarget」にチェックが入っているものすべてが取れます。
こいつね。


背景の絵としておいているものにチェックを付けておくと背景の絵のオブジェクトも取得してくるので注意ですね。
オブジェクトが重なっているときなんかは気にしてみるといいかもしれません。
デフォルトでチェックは入ってますしね。

とりあえず昨日こんな方法でやりたいことを実装したので書いてみた!
今日もこれで終わりです!

ではまた来週ノシ

Category: 開発日記(Unity)

tb 0 : cm 0   

【Unity】テラシュールさんのuGUI対応トランジションがうまく動かず、某めるくまさんが解決方法考えてくれたので、自分の手柄としてブログにかいときますね! 

おはようございます。坂内っす。
残寒の候、皆様風邪など召されずにお過ごしでしょうか。

現在Unity5.5をメインで使用してまして、画面遷移時のトランジションをいれようと悪戦苦闘しておりました。
使用しようと思っていたのはこちら。

【テラシュールブログ】Unityでトランジションを使用した綺麗な場面転換(uGUI対応版)
http://tsubakit1.hateblo.jp/entry/2015/11/04/015355

これこれ。
以前も触ってみようとしてあきらめたやつね。

トランジションといえば、【Easy Masking Transition】 というアセットもあるんですが、こちらは持っているものの、画面全体のトランジションしかできないため、一部UIのトランジションはできないんですよね。
https://www.assetstore.unity3d.com/jp/#!/content/8734


しかし、テラシュールさんのブログから落とせるFade Cameraを落としてみても動かない・・・・・
”普通のトランジション設定”という方は動くのですが、uGUIをトランジションしようとしても動かない・・・

ってことで、某めるくまさんとこんなやり取りをし、めるくまさんが動く方法を教えてくれたので、ここに書いときます!


ってことで、結局どうしたの?ってのは↓を参考に。

FadeUI.cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI;

[RequireComponent (typeof(RawImage))]
[RequireComponent (typeof(Mask))]
public class FadeUI : UnityEngine.UI.Graphic, IFade
{
[SerializeField]
private Texture maskTexture = null;

[SerializeField, Range (0,1)]
private float cutoutRange;

protected override void Start() {
base.Start();
UpdateMaskTexture(maskTexture);
}

public void UpdateMaskTexture(Texture texture) {
material.SetTexture("_MaskTex",texture);
material.SetColor("_Color",color);
}

public float Range {
get {
return cutoutRange;
}
set {
cutoutRange = value;
UpdateMaskCutout (cutoutRange);
}
}

[SerializeField] Material mat = null;
[SerializeField] RenderTexture rt = null;

[SerializeField] Texture texture = null;

private void UpdateMaskCutout (float range)
{
mat.SetFloat ("_Range", range);

UnityEngine.Graphics.Blit (texture, rt, mat);

var mask = GetComponent ();
mask.enabled = false;
mask.enabled = true;
}

#if UNITY_EDITOR
protected override void OnValidate() {
base.OnValidate();
UpdateMaskCutout(Range);
UpdateMaskTexture(maskTexture);
}
#endif

}


こうなりました。

使い方はテラシュールさんのページを見てもらえばわかりますが、FadeMaskオブジェクトをCanvasの下に置き、その下にトランジションしたいオブジェクトを置きます。
例として、白い四角Imageを置いてみます。



次にFadeUIのMat、Textureにルール画像と呼ばれるテクスチャを付けます。
こちらも詳しい話はテラシュールさんのブログみてね!



これでオッケー!

これでFadeUIのCutout Rangeの値をいじるだけで、FadeMask下のオブジェクトにトランジションがかかります。
※クリックして動きみれるよ!



こんな感じでいい感じのトランジションが使えます!
是非お使いください!

では、あでゅ~ノシ

Category: 開発日記(Unity)

tb 0 : cm 0   

【Unity】オブジェクトを曲線で動かしたかったよ。DoTween使うと簡単なんすね。 

こんにちは。
大坂です。

今日は平成29年2月9日らしいです。
肉年肉の日ですね。
特に何もする予定はないですけど…。
皆さんは元気に肉食ってください!

さてさて、今週もネタがなく簡単な奴ですよ。
まぁタイトルの通りっすね。

この記事でふにゃふにゃ動かすのをやっているのでiTweenでもできますけどね。
DoTweenだとパスの値と「PathType」の指定で曲線の動きができるのでご紹介。

コードは簡単っす。

Vector3[] path = {
new Vector3(0f, 100f, 0f),
new Vector3(200f, 0f, 0f),
};

obj.GetComponent().DOLocalPath(path, 1f, PathType.CatmullRom).SetEase(Ease.Linear);


「PathType.CatmullRom」を指定すると曲線で移動してくれます。
「PathType.Linear」を指定すると直線になります。

曲線はこんな動きですね。


ついでに「SetOptions(true)」を付けてあげると元の位置に戻ります。


こんなんですね。
指定している時間が戻るまでの時間になるのでご注意を。

では今週もこの辺でノシ

Category: 開発日記(Unity)

tb 0 : cm 0   

【アプリ開発】アプリのシェア機能で、Android:iOSリンクを一つにしちゃう方法。これですっきりよ! 

ご機嫌如何でしょうか?
今週末抜歯するので、週末お酒飲めなくて嘆いている坂内っす。

先週楽天リワードのMeetupにお邪魔してきました。
なんかプレゼン資料の文字小さくて皆さん見えてませんでしたよね。( ゚∀゚)アハハ八八ノヽノヽノヽノ \ / \/ \
まぁいいです。

楽天リワードは全然使う価値あると思うので、興味あるかたはお声かけてください。
なにか知ってる情報流します。

さて、Unityの話題です。
あ、いや。Unityの話題じゃないです。

最近うちのアプリのシェア機能で使ってるやつに関して。

Twitterへのシェア機能って結構つけてるアプリ多いですよね。

「〇〇〇~~~~
 [写真]
 Android:http://~~
 iOS:http://~~~~


とかって、シェアさせるやつ。

Android版でシェアしても、Twitter見てる人がiOSだった場合を考えて、Androidのリンクと、iOSのリンクを書くと思うんですよ。
逆もしかりです。

ただ、この方法だとAppleさんからリジェクトくらうんですよね。
「iOSのアプリの中に"Android"って文字いれるなよ あほ」って言われます。

純粋にこのままAndroid:~~~って文字を消してしまうと、iOSの人がシェアしたものについてはAndroidへのリンクが消えてしまいます。
皆さんもちろん対応してると思いますが、うちの対処法を書いときますね!

①どこかにリンク用HTMLを用意
②シェアでは①のURLを記載

この2ステップで対応可能です。

~~~~~~~~~~~~~~~~~~~~~~~~
例えばリンクが以下だったとします。
Androidのリンク:https://play.google.com/store/apps/details?id=com.testtest.testtesttest
iOSのリンク:https://itunes.apple.com/jp/app/id123456789
①どこかにリンク用HTMLを用意

testlink.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('iPad') > 0){
location.href = "https://itunes.apple.com/jp/app/id123456789";
}else if (navigator.userAgent.indexOf('Android') > 0){
location.href = "https://play.google.com/store/apps/details?id=com.testtest.testtesttest";
}else{
location.href = "https://play.google.com/store/apps/details?id=com.testtest.testtesttest";
}
</script>
<title>testゲームの両OSリンク
</head>
<body>
</body>
</html>


JavaScriptのユーザエージェントによって勝手にリンク先へ飛ぶように設定しておきます。
もちろんAndroidでもiOSでもないときのリンクは、なにかアプリ紹介ページとかにしてもいいですね。
※もっといいスクリプトあったら教えてください!

②シェアでは①のURLを記載
「〇〇〇~~~~
 [写真]
 http://①のリンク


これだけで、AndroidからでもiOSからでもそれぞれのリンク先に遷移するようになります。
もちろん①のリンクもURL短縮とかを使えばさらにすっきり!!

とりあえず必要なのは、①のhtmlを置くところですね。
レンタルサーバーとかもない方は、なんか借りてくださいね(*'▽')

と、いう感じでうちはやってます!
少しでもアプリ開発のためになる情報となれば幸いです。

それではあでゅ~ノシ

Category: 開発日記(Unity)

tb 0 : cm 0   

【Unity】Physics.BoxCastのメモ(メモですからね。 

こんにちは。
大坂です。

ブログ書いてる暇があんまりないので手短に。(いつも短いですけど…

Physics.Raycastをつかってカーソルがある位置にオブジェクトがあるか見ていて、
ふとカーソルでつかんで動かしてるオブジェクトと重なったら処理しようとおもって、Physics.BoxCastを使っためも。

API見るとこんな感じ。
https://docs.unity3d.com/jp/current/ScriptReference/Physics.BoxCast.html



こいつの意味がよく分からなくてちょっと時間がかかったのでメモ。
わかってしまえば普通に書いてあることなんですけどね。

要は各軸オブジェクトの半分を指定しろってことでした。

new Vector3(transform.lossyScale.x * 0.5f, transform.lossyScale.y * 0.5f, transform.lossyScale.z);


こんな感じでスケールのを半分にしたVector作って渡してあげればよかったって話です。

時間もないので今日も短くほとんど役に立ちそうにない話題で終わりです!

ではまた来週ノシ

Category: 開発日記(Unity)

tb 0 : cm 0