Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【Unityネタ】オープンワールドでよく見るインジケーターを作ってみる

この記事はUnity Advent Calendar 2021 13日目の記事です。

qiita.com

昨日は@xrdnkさんによる「Unidux でマルチシーン画面遷移制御を行う」でした。

明日は@tsubaki_t1さんによる「Unity 2021.2のSceneViewで色々な操作を行う新機能、Overlayについて」です。

 

 

今回はオープンワールドゲームでよく見るインジケーターをUnityで実装してみます。

f:id:Raspberly:20211213010215g:plain

f:id:Raspberly:20211213012611p:plain

 

 

 

インジケーターとは

インジケーターは以下のGIFで表示されている白いバーのことです。
これはMETAL GEAR SOLID Vのプレイ映像ですが、敵に怪しまれると白いバーが画面に表示されます
このバーはこちらを怪しんでいる敵の方向を知らせてくれる役割を持ちます。

f:id:Raspberly:20211212210452g:plain

これをUnityで作ってみます。

 

恐らくゲームによって呼び方は違いますが、METAL GEAR SOLID Vではインジケーターと呼称されているため、
本記事でもインジケーターで表記します。

mgstpp-app.konamionline.com

 

 

 

開発環境

Unity 2020.3.22f1

デモのキャラクターモデルはユニティちゃん*1を使用しています

raspberly.hateblo.jp

 

 

 

実際に作ってみる

UIの作成

まずはインジケーターのUIを作っていきます。

Canvasを作成し、Canvasの子に空のGameObjectを作成します。名前はIndicatorBaseにしておきます。

f:id:Raspberly:20211212222927p:plain

IndicatorBaseのAnchorはMiddleCenterに設定します。(最初からそうなってるはず)

f:id:Raspberly:20211212222854p:plain

 

次に、IndicatorBaseの子にImageを作成。

f:id:Raspberly:20211212224602p:plain

インジケーターとして表示するSpriteを適当に用意しImageに設定しておきます。
AnchorはMiddleCenterに設定します。

f:id:Raspberly:20211212230331p:plain

PosYなどを設定し上を向くように配置します。

f:id:Raspberly:20211212225246p:plain

 

プレイヤーとエネミーの作成

適当にCapsuleとCubeを作成します。
Capsuleをプレイヤーに、Cubeをエネミーとして扱います。

f:id:Raspberly:20211212231505p:plain

それぞれ名前も変えておきます。

 

 

コンポーネントの作成

以下のScriptをコピーし、IndicatorBaseコンポーネントを作成します。

using UnityEngine;

public class IndicatorBase : MonoBehaviour
{
    [SerializeField] Transform Player;
    [SerializeField] Transform Camera;
    [SerializeField] Transform Enemy;
    [SerializeField] RectTransform Indicator;

    void Update()
    {
        var rot = Quaternion.LookRotation(Enemy.position - Player.position);
        var angle = (Camera.eulerAngles - rot.eulerAngles).y;
        Indicator.localEulerAngles = new Vector3(0, 0, angle);
    }
}

 

 

コンポーネントのアタッチ

プレイヤーにIndicatorBaseコンポーネントをアタッチします。(プレイヤーじゃなくてもいいが)

 

コンポーネントは以下のように設定します。

f:id:Raspberly:20211213043452p:plain

IndicatorにはIndicatorBaseを紐づけます。
インジケーター自体ではなく、その親を回転させるためです。

 

実際に動かすと、エネミーの動きに合わせてインジケーターが回転するのがわかります。

f:id:Raspberly:20211213002603g:plain

 

 

 

ユニティちゃんを使ったシーンで試してみました。
インジケーターのデザインを変えたり、敵に見つかったときだけ表示したり、
複数表示に対応したりと色々楽しめそうですね!

f:id:Raspberly:20211213010215g:plain

敵キャラにはこちらのアセットを使っています。

raspberly.hateblo.jp

 

 

 

まとめ

オープンワールドゲームでよく見るインジケーターをUnityで作ってみました
ただ、スクリプトについてはまだまだ改善に余地がありそう。

 

一人称ゲームでもそのまま動作しますが、トップダウンなどカメラの挙動が異なるゲームで使用する場合スクリプトの修正が必要にかも。

 

以上です。

 

 

 

 

旧バージョン

途中でスクリプトを変えました。古いのはこっち

using UnityEngine;

public class IndicatorBase : MonoBehaviour
{
    [SerializeField] Transform Player;
    [SerializeField] Transform Enemy;
    [SerializeField] RectTransform Indicator;

    void Update()
    {
        var rot = Quaternion.LookRotation(Enemy.position - Player.position);
        var angle = (Player.eulerAngles - rot.eulerAngles).y;
        Indicator.localEulerAngles = new Vector3(0, 0, angle);
    }
}

PlayerにはMainCameraを紐づけます
TPS*2のようにプレイヤーキャラクターとカメラが別方向を向くゲームで、プレイヤーを基準にするとプレイヤーがクルクル回転するたびインジケーターも荒ぶります。そのため敵の角度はカメラを基準にしています。
ただこれだと、敵とプレイヤーが密着した時に正しい角度がとれないため今のバージョンに修正しました。

 

 

参考資料

スクリプト内の計算についてはこちらから

fanblogs.jp

t-stove-k.hatenablog.com

 

www.create-forever.games

 

Quaternion.LookRotationは調べて初めて知りました。
こんな便利なものがあったんですね。

 

 

 

 

過去のアドベントカレンダー記事

raspberly.hateblo.jp

 

raspberly.hateblo.jp

 

raspberly.hateblo.jp

 

 

 

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。

*1:© Unity Technologies Japan/UCL

*2:三人称視点シューティングゲーム

【アセット紹介】Stylizer - Extended で見栄えよい画面を作る【Unity】

今回はアセットの紹介をしていきます。
紹介するのはStylizer - Extended。
ゲームの見栄えをよくするポストプロセスアセットです。

f:id:Raspberly:20211129152033p:plain

f:id:Raspberly:20211130030940p:plain

 

 

 

お得なセール情報

現在アセットストアでは、ブラックフライデーセールを開催中!
今年アセットストアで最も人気を集めた500を超えるアセットが、50%オフで購入できるチャンス!
詳しくは↓のバナーからどうぞ

f:id:Raspberly:20211120174227j:plain

今回紹介する「Stylizer - Extended」も対象アセットです。

 

どんなアセット?

カラーパレットを使って画面全体の色味を調整したり、ピクセルアートやドット絵風ゲームのように画面全体をピクセル化したり、ノイズをかけたりするポストプロセスアセットです。

 

一貫した方法で色を統一し、画面をピクセル化します。ご覧のとおり、非常に使いやすく、数秒でゲームの外観を劇的に変えることができます。

コンテンツ:
スタイライザーイメージエフェクトでは、次の3つのレイヤーで遊ぶことができます。
▲パレットツールを使用してゲームの色を変更し、それらの色をパターンと混合して、さまざまな外観を実現します。
▲画面をピクセル化してピクセルを与える—芸術的な美学
▲粒子を適用してより詳細にする

パッケージには、イメージ効果でディ​​ザリングレイヤーと同じ結果を作成するために使用できるいくつかのマテリアルシェーダーが含まれています。合計8つのディザリングシェーダーが利用可能です。「標準」および「拡散」(ランバート)は、ディザリング効果がマテリアルに適用される前に使用される照明方法を指定します。

URP、モバイル、VRをサポートしています。

 

公式ドキュメント

www.beffio.com

 

 

 

開発環境

Unity2020.3.22f1

Stylizer - Extended ver1.3

キャラクターモデルはユニティちゃん*1を使用しています

raspberly.hateblo.jp

 

 

インポートの確認

アセットインポート完了時はこんな感じです。

f:id:Raspberly:20211127193928p:plain

 

URPで使うときの初期設定

URPで使うときに以下の設定をします。

まずはStylizerURP用のunitypackageをインポート

f:id:Raspberly:20211127193952p:plain

インポート後、unitypackageがあったフォルダにUniversalRenderPipelineAssetがあるので、

f:id:Raspberly:20211128222546p:plain

これをProjectSettings/Quality/Renderingに設定

f:id:Raspberly:20211129021451p:plain

以上の設定をしないとDitheringとGrainが機能しなくなります
(アセットストアのレビューでも指摘多数)

 

デモシーンの確認

Stylizer/Scenesにデモシーンが用意されています。

f:id:Raspberly:20211129232256p:plain

f:id:Raspberly:20211130025039p:plain

f:id:Raspberly:20211130025718g:plain

f:id:Raspberly:20211130025734g:plain

 

 

 

 

実際に試してみる

基本的なコンポーネント

Stylizerの機能を使うには、CameraにStylizerコンポーネントをアタッチします。

f:id:Raspberly:20211129233100p:plain

ここから各種機能を有効、調整します。

 

 

画面にディザリングをかける

Ditheringにチェックを入れるとディザリングが有効になります。
ディザリングはカラーパレットとパターンを使ってより良い絵作りを実現する機能です。

f:id:Raspberly:20211130022545p:plain

 

使い方はPalette Assetにカラーパレットを、Pattern Assetにパターンを設定するだけです。

f:id:Raspberly:20211130022729p:plain

ゲームを起動するとこんな感じ、カラーパレットにより見栄えがかなり変わりました。

f:id:Raspberly:20211130023604g:plain

 

カラーパレットとパターンは自作できますが、すでにいくつか用意されています。

f:id:Raspberly:20211130021203g:plain

 

 

画面をピクセル化する

Pixelationを有効にすると画面がピクセル化します。
Scaleで度合いを調整できます。

f:id:Raspberly:20211129233737p:plain

f:id:Raspberly:20211130024704g:plain

ドット絵風のゲームを作るときにいいかも

 

画面にノイズをかける

Grainを有効にするとグレイン(細かい粒子)を使ったノイズを画面全体にかけることができます。

f:id:Raspberly:20211129235437p:plain

f:id:Raspberly:20211130025955g:plain

 

 

カラーパレットを作る

独自のカラーパレットを作成する機能もあります。
ProjectビューのCreate/Beffio/DitheringPaletteで新しいカラーパレットが作成されます。

f:id:Raspberly:20211130012412p:plain

f:id:Raspberly:20211130013244p:plain

 

Inspectorから調整が行えます。ランダム作成機能もありますね。

f:id:Raspberly:20211130012533p:plain

 

作成したカラーパレットはStylizerコンポーネントに紐づけるだけですぐに確認できます。

f:id:Raspberly:20211130014222p:plain

 

これは素晴らしいものだ。

f:id:Raspberly:20211130030704g:plain


さらにピクセル化をかけるとこんな感じ

f:id:Raspberly:20211130031829g:plain

 

 

 

まとめ

・Stylizer - Extendedを使うと見栄えを大きく変えることができる
・カラーパレットを使った色表現、ピクセル化、ノイズの3つが用意されている
・ノーコーディングでD&Dで動作させることができる

 

見栄えのいい絵を作りたい人にも、ピクセルアートを作りたい人にもオススメできるアセットです。
Beautify 2と併用しても問題ありませんでした。

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。

*1:© Unity Technologies Japan/UCL

【アセット紹介】Pro Radar Builder でレーダーを作る【Unity】

今回はアセットの紹介をしていきます。
紹介するのはPro Radar Builder。
レーダーを作成するツールアセットです。

f:id:Raspberly:20211120171846p:plain



お得なセール情報

現在アセットストアでは、ブラックフライデーセールを開催中!
今年アセットストアで最も人気を集めた500を超えるアセットが、50%オフで購入できるチャンス!
詳しくは↓のバナーからどうぞ

f:id:Raspberly:20211120174227j:plain

今回紹介する「Pro Radar Builder」も対象アセットです。

 

どんなアセット?

レーダー、コンパス、ナビゲーション、ミニマップを作成できるツールアセットです。

ソースコードが含まれています)
PRO Radar Builderは、作成できる強力なAAAエディターツールです。

●3Dレーダー(ワールドと画面スペース)
●2D標準レーダー
●2D Unity UIレーダー(ワールドと画面スペース)
●ナビゲーションシステム
●コンパス
●環境の再シミュレーション
●リアルタイムミニマップ
●静的ミニマップ
●ターゲットトラッカー

f:id:Raspberly:20211120180816p:plain

 

 

開発環境

Unity2020.3.22f1

Pro Radar Builder ver2021.2B

 

 

インポートの確認

インポート完了時はこんな感じです。

f:id:Raspberly:20211120172944p:plain

ドキュメントがありますがかなり簡素なのでチュートリアルビデオを見た方がいいです。

youtu.be

 

デモシーンの確認

Assets/Pro Radar Builder/Extra Assets For Example Scenes/Sceneにデモシーンが含まれています。

f:id:Raspberly:20211120130248p:plain

注意:一部のシーンはエラーだったりMissing Prefabだったりで動きません

 

2Dレーダーや3Dレーダーの動作確認ができます。
サイバーチックな素材も含まれているのがうれしい。

f:id:Raspberly:20211120170533g:plain

 

 

 

実際に試してみる

3Dレーダー、2Dレーダーを作ってプレイヤー、エネミーを表示するところまでやってみます。

 

ビルダーのオープン

UnityのメニューバーからTools/DaiMangou/ProRadarBuilderを選択。

f:id:Raspberly:20211120135937p:plain

 

すると、このようなウインドウが表示されます。
これをビルダーと言いレーダーの各種設定はここから行います。(Inspectorからはやりません)

f:id:Raspberly:20211120140959p:plain

 

レーダーの作成

今回は3Dレーダーと2Dレーダー(UI)を作成します。
ビルダーの「Create Unity UI 2D System」と「Create Standard 3D System」を押します。

f:id:Raspberly:20211120142548p:plain

 

するとシーン上にそれぞれレーダーが作成されます。
Render Cameraというカメラも作成されますが、これは3D Radarをレンダリングするためだけに存在します。

f:id:Raspberly:20211120142539p:plain

 

2Dカメラの初期設定

レーダーのSprite

レーダーのSpriteを変更します。
2D Radar Canvas/2D Radar/Designs/DefaultRadarSpriteを選択し、ImageのSpriteを変更。

f:id:Raspberly:20211120145330p:plain

Spriteが3種類用意されているので、好きなものに変えます。

f:id:Raspberly:20211120145512p:plain

レーダーらしい見た目になりました。好みによってもっと装飾してもいいかもしれません。

f:id:Raspberly:20211120145811p:plain

コンパス用Spriteも用意されてたりします。

f:id:Raspberly:20211120151139p:plain

 

 

3Dカメラの初期設定

レイヤーとカメラの設定

レーダーのレイヤーを変更し、Render Cameraにのみレンダリングされるようにします。

レーダー用のLayerを作成し、3D CameraのLayerを変更します。

f:id:Raspberly:20211120144505p:plain

Main CameraにRadarが映らないようにCulling Maskを設定します。

f:id:Raspberly:20211120144539p:plain

 

最後にRender CameraはRadarのみ映るようCulling Maskを調整します。

f:id:Raspberly:20211120144616p:plain

これでRender Cameraにのみ映るようになりました。

 

レーダーのSprite

2Dレーダーと同じ要領でSpriteを変更しておきます。

f:id:Raspberly:20211120155955p:plain

f:id:Raspberly:20211120160009p:plain




 

 

プレイヤーとエネミーの作成

レーダーに映るプレイヤーとエネミーの用意します。


シーンに適当にCapsuleやCubeを配置します。
Capsuleはプレイヤーとして、Cubeはエネミーとしておきます。

f:id:Raspberly:20211120160349p:plain

TagもPlayerとEnemyを設定。Tagの名前はお好みでいいです。

f:id:Raspberly:20211120160442p:plain

f:id:Raspberly:20211120160455p:plain

 

 

 

レーダーにプレイヤーとエネミーが映るようにする

2Dレーダーで設定していきます(3Dレーダーもほとんど同じ)

 

ビルダーを開き、Hierarchyビューで2Dレーダーを選択します。

f:id:Raspberly:20211120162314p:plain

ビルダーのリボンメニューからBlipsを押します。
ここからレーダーに映るブリップ(レーダーに映るアイコンのこと)を設定していきます。

f:id:Raspberly:20211120161141p:plain

 

プレイヤーのブリップ

Player is Inactiveとなっている項目の右側にある電源ボタンみたいなやつを押します。
ボタンが緑色になり、Player is Activeになったら成功です。

f:id:Raspberly:20211120161314p:plain

 

Player is Activeを展開して、Sprite、色、Scale、プレイヤーのタグを設定します。

f:id:Raspberly:20211120164229p:plain

シーンを再生するとレーダーにプレイヤーが表示されました。

f:id:Raspberly:20211120164410p:plain

 

 

エネミーのブリップ

Blipsから、「Number Of Other Blip Type」を1にして、
Enemy is Activeを有効化し、以下のような設定にします。
「With Tag」はEnemyです。

f:id:Raspberly:20211120164614p:plain

シーンを再生するとレーダーにエネミーが表示されました。

f:id:Raspberly:20211120164956p:plain

 

ビルダーのRotation and ScaleからTrack Rotationにチェックを入れるとエネミーの回転にあわせてブリップも回転します。

f:id:Raspberly:20211120165114p:plain

f:id:Raspberly:20211120165154p:plain

 

また、ビルダーのDesignsタブからScale/Scene Scaleの値を変えると、レーダーの距離感を調整できます。

f:id:Raspberly:20211120165435p:plain

f:id:Raspberly:20211120170516g:plain




 

まとめ

Pro Radar Builderを使うとレーダーを実装することができました。
時間がないので2Dレーダーだけでしたが3Dレーダーやミニマップもやってみたいところ。

f:id:Raspberly:20211120180425g:plain

 

このアセット用の追加アセットもあります。
オブジェクトを追跡するマーカーを実装するものらしい。

 

 

 

その他注意点

チュートリアルビデオ

今回紹介したPro Radar Builderですが、アセットからリンクされているYoutubeチュートリアルビデオ3年前と古いです。

youtu.be

youtu.be

 

どこからもリンクされていませんがこちらの動画が一番新しいのでこれを参照するといいです

youtu.be

 

シーンの保存

ビルダーを表示した状態だとシーンの保存ができない(すぐに編集された扱いになる)ため、
シーンを保存して終了したい場合はビルダーを閉じる必要があります。

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。

【アセット紹介】Fingers - Touch Gestures for Unity でタッチジェスチャーを実装する【Unity】

今回はアセットの紹介をしていきます。
紹介するのはFingers - Touch Gestures for Unity
タッチジェスチャーを簡単に実装できるアセットです。

f:id:Raspberly:20211109020803p:plain

 

 

お得なセール情報

現在アセットストアでは、パブリッシャー丸ごとセール第9弾を開催中!
ツールアセットの3巨頭である Pixel Crushers、 Digital Ruby (Jeff Johnson)、 Davit Naskidashviliのアセットが対象。
詳しくは↓のバナーからどうぞ

f:id:Raspberly:20211109021740p:plain

 

さらに今なら以下のアセット3つが無料でプレゼントされます
今回紹介するFingers - Touch Gestures for Unityもそのひとつです。
入手方法はカートに入れてクーポンコード「TOOLBOX」を入力するだけです。

2021年11月9日16時59分までなので今のうちに購入処理をしておきましょう!

 

どんなアセット?

タップ、ダブルタップ、ピンチ、パン、ドラッグ&ドロップなどジェスチャー入力を簡単に実装できるアセットです。
形状認識やジョイスティック、Dパッドといったコントローラーも付属しています。

Fingersは、UnityでのUnityタッチ入力とジェスチャ処理に最適です。Fingersジェスチャーは、低価格で使いやすいアーキテクチャチュートリアルビデオを組み合わせた機能セットのトップです。FingersはすべてのUnityプラットフォームで動作します。ネイティブのモバイルAndroidまたはiOSジェスチャを使用したことがある場合は、Fingersを使用すればすぐに使用できます。

f:id:Raspberly:20211109034314p:plain

マウスとキーボードでもピンチ操作ができるデバッグ用機能もあります。

 

 

 

開発環境

Unity2020.3.22f1

Fingers - Touch Gestures for Unity ver3.0.3

 

 

 

インポートの確認

アセットインポート完了時はこんな感じです。

f:id:Raspberly:20211109013759p:plain

デモシーンの確認

Fingers/Demoの中にデモシーンが大量に用意されています。

f:id:Raspberly:20211107114645p:plain

とてつもなく豊富ですね。いくつか見ていきます。

 

基本的なジャスチャーの確認

DemoSceneで確認。
タップ、ダブルタップ、2本指パン、ピンチ、回転、スワイプ、
ドラッグ&ドロップなど基本的なジェスチャーを確認できます。

f:id:Raspberly:20211109012659g:plain

 

Dパッド(十字キー)でオブジェクトの移動

f:id:Raspberly:20211109012716g:plain

 

バーチャルスティックでオブジェクトの移動

f:id:Raspberly:20211109012839g:plain

 

ドラッグ&ドロップでオブジェクトの移動

2Dオブジェクト、3Dオブジェクト、UIの3種類用意されています。

f:id:Raspberly:20211109012731g:plain

 

一人称視点のコントローラー

f:id:Raspberly:20211109012747g:plain

 

特定の文字を認識

認識できる文字は限られているようです
L, X, O, V, U, -, |, /, \ , △, □,ライトニングボルト,チェックマークを認識できます

f:id:Raspberly:20211109013125g:plain

 

 

 

 

 

実際に試してみる

実際に試してみます。

今回は以下の2通りの挙動を作ってみます。
ドラッグ&ドロップでオブジェクトを移動させる
・Dパッドでユニティちゃんを移動させる

ドラッグ&ドロップでオブジェクトを移動させる

基本的なタッチジェスチャードラッグ&ドロップをやってみます。
他のジェスチャーも大体同じように実装できます。

プレハブの配置

Assets/Fingers/Prefab/Resources/FingersScriptPrefabをシーンに配置します。

f:id:Raspberly:20211109004300p:plain

コンポーネントのアタッチ

移動させたいオブジェクト(今回はCube)を作成し、FingersDragDropComponentScriptコンポーネントをアタッチ

f:id:Raspberly:20211109012454p:plain

これで完成です。ゲームを実行するとロングタップでオブジェクトを移動させることができました。
とっても簡単!

f:id:Raspberly:20211109024453g:plain

 

イベントハンドラが用意されているので、
ドラッグ開始時、ドラッグ中、ドラッグ終了時に何か処理をさせるのも簡単。

using UnityEngine;
using DigitalRubyShared;

public class DragDrop : MonoBehaviour
{
    FingersDragDropComponentScript m_DragDropComponent;

    void Start ()
    {
        m_DragDropComponent = GetComponent<FingersDragDropComponentScript>();
        m_DragDropComponent.DragStarted += (sender, e) => DragStart();   
        m_DragDropComponent.DragUpdated += (sender, e) => DragUpdate();   
        m_DragDropComponent.DragEnded += (sender, e) => DragEnd();   
    }

    void DragStart()
    {
        Debug.Log("ドラッグ開始");
    }

    void DragUpdate()
    {
        Debug.Log("ドラッグ中");
    }

    void DragEnd ()
    {
        Debug.Log("ドロップ");
    }
}

イベントの設定ってこんな感じでいいのかしら

 

 

Dパッドでユニティちゃんを移動させる

DパッドUIを設置してユニティちゃんを移動させてみます。

プレハブの配置

Assets/Fingers/Prefab/Resources/FingersScriptPrefabをシーンに配置します。

f:id:Raspberly:20211109004300p:plain

Canvasを作成し、Assets/Fingers/Prefab/FingersDPadPrefabを配置します。

f:id:Raspberly:20211109032505p:plain

 

スクリプトの作成

SDユニティちゃんをシーンに配置し、以下のスクリプトをアタッチします。
ユニティちゃんの設定などは過去記事とほとんど同じです。

using UnityEngine;
using DigitalRubyShared;

public class DPad : MonoBehaviour
{
    [SerializeField] FingersDPadScript m_DPadSComponent;
    [SerializeField] GameObject m_Player;
    [SerializeField] Animator m_Animator;
    [SerializeField] float m_Speed = 3;

    void Start()
    {
        m_DPadSComponent.DPadItemPanned = DPadPanned;
    }

    void Update()
    {
        if(m_Animator.GetFloat("isMoving") != 0) m_Animator.SetFloat("isMoving", 0);
    }

    void DPadPanned(FingersDPadScript script, FingersDPadItem item, PanGestureRecognizer gesture)
    {
        if((item & FingersDPadItem.Right) != FingersDPadItem.None)
        {
            m_Player.transform.eulerAngles = new Vector3(0, 90, 0);
        }
        if((item & FingersDPadItem.Left) != FingersDPadItem.None)
        {
            m_Player.transform.eulerAngles = new Vector3(0, -90, 0);
        }
        if((item & FingersDPadItem.Up) != FingersDPadItem.None)
        {
            m_Player.transform.eulerAngles = new Vector3(0, 0, 0);
        }
        if((item & FingersDPadItem.Down) != FingersDPadItem.None)
        {
            m_Player.transform.eulerAngles = new Vector3(0, 180, 0);
        }

        m_Animator.SetFloat("isMoving", 1);
        m_Player.transform.position += transform.forward * m_Speed * Time.deltaTime;
    }
}

DPadがニュートラルになったときのイベントハンドラがなさそうなので、
ちょっと強引にアニメーションをリセットしています。

f:id:Raspberly:20211109033516g:plain

Dパッドの方向に合わせて移動しました。

 

 

 

まとめ

・Fingers - Touch Gestures for Unityを使うとジェスチャー処理が簡単に実装できる

ひと通りジェスチャーがそろっているのでスマホアプリの開発においてマストバイなアセットだと思います。

以上です。

 

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

スマホ向けバーチャルスティックを簡単に実装できるアセット「Joystick Pack」を過去に紹介しています。

raspberly.hateblo.jp

 

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。

【アセット紹介】Realistic Eye Movements でキャラクターの目を自然に動かす【Unity】

今回はアセットの紹介をしていきます。
紹介するのはRealistic Eye Movements
キャラクターの眼球やまぶたを自然に動かすアセットです。

f:id:Raspberly:20211023173608p:plain

f:id:Raspberly:20211023175625p:plain

 

 

お得なセール情報

現在アセットストアでは、ツール系アセットのメガバンドルセールを開催中!
時間も労力も節約できるツールアセットの中でも特に人気のアセットがお得に入手できちゃいます!
詳しくは↓のバナーからどうぞ

f:id:Raspberly:20211023172621p:plain

今回紹介する「Realistic Eye Movements」も対象アセットです。

 

どんなアセット?

キャラクターの目を自然にアニメーションさせるアセットです。
現実の人間のように、眼球の細かい運動や瞬きを簡単に実装できます。
VRにも対応済み。

この使いやすいコンポーネントは、目、頭、まぶたをアニメーション化することで、キャラクターをよりリアルにします。公開された学術研究からの人間の動きのデータを使用して、説得力のある目のアニメーションを作成します。

 

待機状態とかにぴったり!

f:id:Raspberly:20211023171046g:plain

 

 

開発環境

Unity 2020.3.14f1
Realistic Eye Movements ver2.1.3

 

 

インポートの確認

アセットインポート完了時はこんな感じです。

f:id:Raspberly:20211023140711p:plain

デモシーンの確認

RealisticEyeMovementsDemoシーンがデモシーンになっています。
周りを見渡す挙動、カメラを見つめる挙動、ボールを見つめる挙動の3種類が確認できます。

f:id:Raspberly:20211023151533g:plain

 

※Built-in以外のプロジェクトではマテリアルかシェーダーを差し替えないと正常に表示されません

 

 

 

実際に試してみる

実際にキャラクターモデルに適用して、目やまぶたをアニメーションさせてみます。

f:id:Raspberly:20211023171046g:plain

 

 

このアセットはモデルのまぶたの仕組みでセットアップ方法が違います

厳密には以下の3種類です。

・AdobeFuse(Mixamo)、MakeHuman、Autodesk Character Generator、DAZ Studio、ReallusionのCharacter Creator 3、UMAで生成されたキャラクター

・まぶたがボーンによって動くキャラクター

・まぶたがBlendshapeで動くキャラクター

 

 

今回はBlendsharpを使っているモデルで試してみます
使うモデルはUnityChan SSUです。

raspberly.hateblo.jp

 

他の形式のキャラクターモデルを使っている場合はこちらをどうぞ

youtu.be

 

 

コンポーネントのアタッチ

Animatorがアタッチされているオブジェクトコンポーネントを2つアタッチします。LookTargetControllerEyeAndHeadAnimatorの2つをアタッチ。

f:id:Raspberly:20211023163201p:plain

 

EyeAndHeadAnimatorの設定

Setupを開き、EyecontrolをMecanimEyeBonesに、EyelidcontrolをBlendshapesに設定。

f:id:Raspberly:20211023161302p:plain

 

目を開いている状態を保存

引き続きEyeAndHeadAnimatorを設定していきます。
次は目を開いて正面を見ている状態目を閉じている状態目を上に向けている状態目を下に向けている状態の4つを保存します。

 

最初に正面を見ている状態から保存します。
ユニティちゃんの場合最初から正面を見ているので、何もせずインスペクターのSaveボタンを押します。

f:id:Raspberly:20211023161902p:plain

f:id:Raspberly:20211023162105p:plain

 

目を閉じている状態を保存

次に目を閉じている状態を保存します。
Blendshapeの値を変えて目を閉じている状態を作り、EyeAndHeadAnimatorのSaveボタンを押します。

 

ユニティちゃんの場合、UnityChanSSU_DynCol/MeshRoot/Head_DefからBlendshapeにアクセスできます。

f:id:Raspberly:20211023162951p:plain

Head_EyeCloseのスライダーを動かし目を閉じさせます。

f:id:Raspberly:20211023163435p:plain

f:id:Raspberly:20211023163539p:plain

この状態で、EyeAndHeadAnimatorのSaveボタンを押します。

f:id:Raspberly:20211023163608p:plain

これで保存されました。

 

 

目が上を向いている状態を保存

次は目が上を向いている状態を保存します。
目が開いている必要があるので、最初に保存した状態をロードするといいでしょう。

f:id:Raspberly:20211023163834p:plain

f:id:Raspberly:20211023163934p:plain

 

目が上を向いている状態を作るには眼球の角度を変える必要があります。
眼球はEyeAndHeadAnimatorのEyesボタンを押すと、自動的に選択してくれます

f:id:Raspberly:20211023164026p:plain

f:id:Raspberly:20211023164042p:plain

この2つのオブジェクトの角度を調整して上を向いているようにしたら、

f:id:Raspberly:20211023165722g:plain

これまでと同じようにSaveボタンを押します。

f:id:Raspberly:20211023165015p:plain

 

※眼球の向きを変える時、rotationをglobalにしておくといいかも

f:id:Raspberly:20211023165654p:plain

 

目が上を向いている状態を保存

最後に下を向いている状態を保存します。
上を向いている時と同じ要領で眼球の角度を変えて、

f:id:Raspberly:20211023170340g:plain

Saveボタンを押します。

f:id:Raspberly:20211023170008p:plain

 

これで完了です。
最後は正面を向いた状態ロードしておきましょう。(間違って上書きしないよう注意)

f:id:Raspberly:20211023170436p:plain

 

 

シーンを再生してみるとユニティちゃんがまわりをキョロキョロしているのが確認できます。

f:id:Raspberly:20211023171046g:plain

目の動く頻度、スピード、最大角度などはインスペクターから調整できます。

f:id:Raspberly:20211023170646p:plain

 

 

 

特定のオブジェクトを見つめるようにする

次はキャラクターの顔を特定にオブジェクトに向かせます。
これはインスペクターだけではできないのでScriptから指定する必要があります。

 

以下のEyeLookat.csを作成し、

using UnityEngine;
using RealisticEyeMovements;

public class EyeLookat : MonoBehaviour
{
    public GameObject m_Target;
    [SerializeField] LookTargetController m_LookTargetController;

    void Start ()
    {
        m_LookTargetController.LookAtPoiDirectly(m_Target.transform);
    }
}

 

EyeAndHeadAnimatorやLookTargetControllerと同じオブジェクトにアタッチし、
向かせたいオブジェクトとLockTargetControllerコンポーネントを紐づけます

f:id:Raspberly:20211025000604p:plain

 

これで完成。
ターゲットとして設定したSphereを常に見つめるようになりました。

f:id:Raspberly:20211025003108g:plain

 

 

目の可動域などはEyeAnd HeadAnimatorから調整できます。

f:id:Raspberly:20211025001331p:plain

 

 

 

まとめ

・Realistic Eye Movementsを使うと、目やまぶたの動きを自然にアニメーションさせることができる

 

 

以上です。

 

 

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。

【アセット紹介】Highlight Plus でオブジェクトにハイライトをつける【Unity】

今回はアセットの紹介をしていきます。
紹介するのはHighlight Plus
オブジェクトにハイライトやグロウなどエフェクトをつけるアセットです。

f:id:Raspberly:20211011032612p:plain

f:id:Raspberly:20211011032859p:plain




 

お得なセール情報

現在アセットストアでは、アジアのユーザー限定のメガバンドルセールを開催中!終了しました
最大43.99ドルで23の高品質アセットが入手できちゃいます!詳しくは↓のバナーからどうぞ

f:id:Raspberly:20211011021646p:plain

今回紹介する「Highlight Plus」も対象アセットです。

 

 

どんなアセット?

オブジェクトにハイライトをつけたり、
他のオブジェクトに遮られた時に透過したりなどエフェクト効果をつけるアセットです。

ハイライトプラスは、シーン内の3Dオブジェクトにアウトライン、グロー、オーバーレイ、シースルー、その他の効果追加する強力なアセットですHPは、プラットフォームの互換性パフォーマンスおよび汎用性を念頭に置いて設計されています

**プラットフォームの互換性**

 

ビルトイン/標準パイプライン(Unity 2018.4+)

-MacWindowsAndroidiOSWebGLと互換性があります。

-VR互換。

-モバイルで超高速。

 

ユニバーサルレンダリングパイプライン(Unity 2019.3+)

アセットには、ユニバーサルレンダリングパイプライン用に設計されたバージョンも含まれています。

f:id:Raspberly:20211011032434g:plain



 

 

開発環境

Unity 2020.3.14f1

Universal RP ver10.5.1

HighlightPlus ver6.9

 

今回はURPプロジェクトで行いますが、Built-inでも同様の手順でできます。

 

 

 

インポートの確認

アセットインポート完了時はこんな感じです。
Unity標準のBuiltinとURP2種類のパッケージが用意されています。
プロジェクトに合ったパッケージをインポートします。

f:id:Raspberly:20211006004858p:plain

今回はURPでやります。
Assets/HighlightPlusBundle/HighlightPlus_URP_Pipelineをインポート

f:id:Raspberly:20211006014150p:plain

f:id:Raspberly:20211006014222p:plain

Built-inの場合はHighlightPlus_Builtin_Pipelineをインポートします。

 

インポート後は「HighlightPlus」というフォルダが作成されます。

f:id:Raspberly:20211006014950p:plain



URP版の初期設定

URPプロジェクトのみ以下の設定をします。
Project Settingsを開き、Graphics/Scriptable Render Pipeline Settingsから現在設定中のURP Assetをダブルクリック

f:id:Raspberly:20211006231308p:plain

 

InspectorビューのRenderer ListにあるRendererDataをダブルクリック

f:id:Raspberly:20211006232152p:plain

RendererDataのAddRendererFeatureボタンから、Highlight Plus Render Pas Featureを追加します。
これで準備完了です。

f:id:Raspberly:20211007000721p:plain

公式で解説動画もあります

youtu.be

 

 

デモシーンの確認

デモシーンはAssets/HighlightPlus/Demoの中にあります。

f:id:Raspberly:20211010225113p:plain

マウスが重なるとハイライトされるのが確認できます。

f:id:Raspberly:20211010230521g:plain

 

 

 

 

実際に試してみる

手っ取り早くキャラクターにハイライトをつけてみます。

今回はUnityChanURPを使用します。

raspberly.hateblo.jp

 

コンポーネントのアタッチ

MeshRendererのルートになるオブジェクトにHighlightEffectコンポーネントをアタッチします。
今回のメインとなるハイライトや透過効果をつけるコンポーネントです。

f:id:Raspberly:20211010235602p:plain

 

ハイライトを有効化

HighlightEffectコンポーネントHighlightedにチェックを入れるとハイライトが有効になります。

f:id:Raspberly:20211011000744p:plain

 

これは当然Scriptからも制御できます。

f:id:Raspberly:20211011002145p:plain


ハイライトが有効になるとこんな感じ、アウトラインや色味がつき強調表示されてる感を演出できます。

f:id:Raspberly:20211011002428p:plain

 

ここからはそれぞれの細かい機能を見ていきます。

 

アウトラインの設定

Outlineからアウトラインの設定ができます。
スライダーを0にするとアウトラインが無効化されます。

f:id:Raspberly:20211011002637p:plain

色や太さなどが調整できます。

f:id:Raspberly:20211011003400p:plain

 

 

グロウの設定

Outer GlowとInner Glowでグロウの設定ができます。
オブジェクトを発光させるような演出です。
スライダーを0にするとアウトラインが無効化されます。

f:id:Raspberly:20211011002803p:plain

 

Outer Glowはオブジェクトの外側に作用するグロウです。
強弱するアニメーション機能もあります。

f:id:Raspberly:20211011005138g:plain

 

Inner Glowはオブジェクトの内側に作用するグロウです。

f:id:Raspberly:20211011003712p:plain

 

 

オーバーレイの設定

Overlayからオーバーレイの設定ができます。
オブジェクトの上に色を重ねて強調するような演出ができます。

f:id:Raspberly:20211011003032p:plain

Outer Glowと同じくアニメーション機能もあります。

f:id:Raspberly:20211011005146g:plain

 

 

ターゲットの設定

Targetにチェックを入れるとターゲット機能が設定できます。
Rendererの位置に合わせてターゲットマーカーを表示する機能です。

f:id:Raspberly:20211011003206p:plain

ScriptでHighlightEffect.TargetFX()を呼び出すと表示できます。

f:id:Raspberly:20211011014836g:plain

 

 

シースルーの設定

SeeThroughはオブジェクトが別のオブジェクトに遮られたときに透過表示する機能です。
Neverにすると無効になり、Always When OccludedにするとHighlighted状態に関係なく表示されます。

f:id:Raspberly:20211011003229p:plain

f:id:Raspberly:20211011005215g:plain

 

シースルー機能が強すぎる時

別のオブジェクトに遮られたわけでもないのにオブジェクトのエッジが強調表示される場合、
DepthOffsetの値を調整することで解決できます。

f:id:Raspberly:20211011025735p:plain

f:id:Raspberly:20211011030143p:plain

 

 

ヒットFXの設定

HitFXはオブジェクトを一瞬強調表示する機能です。
見え方はオーバーレイに近い。

f:id:Raspberly:20211011005354p:plain

HitFX()を呼び出すと表示されます。

f:id:Raspberly:20211011005204g:plain

f:id:Raspberly:20211011005311p:plain

 

 

 

まとめ

Highlight Plusを使うと、オブジェクトに対してハイライトやアウトライン、シースルーなどエフェクトを与えることができる。

f:id:Raspberly:20211011032434g:plain



過去に類似する機能を持つアセット「Easy Performant Outline 2D | 3D」を紹介したことがあります。

raspberly.hateblo.jp

どちらも一長一短なので、必要な機能に応じて使い分けるといいでしょう。
「Easy Performant Outline 2D | 3D」は2D3D両方で使えますが、
Highlight Plusで2Dをやりたい場合別売りのアセットが必要になります。

 

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。

【勉強会レポ】: Gotanda.unity #20

勉強会のレポート(メモ)です。
参加したのはこちら「Gotanda.unity #20」

meetup.unity3d.jp

ハッシュタグ : #gotandaunity

 

この記事は私の主観でのまとめです。
重要な情報が削られていたり、解釈違いの場合があるのでアーカイブの動画と合わせてどうぞ。

 

アーカイブはこちら

www.youtube.com

 

Gotanda.unityとは

都内近郊を中心に活動を行うUnityユーザのコミュニティです
Unityに興味がある人であれば、どなたでも気軽にご参加いただけます!
(五反田発の勉強会であることから「Gotanda.unity」というネーミングになっております)

 

 

LT#1 さい: Unityでペイントツールを作ってみる

解像度はどこまで上げるか

解像度は1024*1024以上がよさそう。これ以上は解像度より境界線をぼかしたほうがよい。

Unityのお絵描きで検索するとヒットするコードでよく見るSetPixelsは結構無駄が多い

→Graphics.BlitでGPUに処理させる

なめらかな線を引きたい

代表的アルゴリズム「ブレゼンハムのアルゴリズム」では円とかがきれいにかけない
→Catmull-Rom splineで曲線補間する

カラーの計算

重ね塗りで色が濃くなったり混ざったようにしたい。
乗算とスクリーンの組み合わせを使用しました。

 

こちらのアプリで試し書きができるのでぜひさわってみてください

laughter.inc

 

 

 

LT#2 なかじ: Unityで使える汎用的なハンバーガーメニューの実装

Vフレットの紹介

ギターに合わせてアバターで弾き語りができるアプリ
今回はVフレットを作っている時に生まれたアセットを紹介

UniHamburgerの紹介

メニューからゲーム中のパラメータを操作できるアセット
リアルタイムのプレビューが可能
GitHubで公開予定です

github.com

UniHamburgerの特徴

・uGUIベースで簡単に導入できる
・要素の追加はワンライナーでできる
Enumのドロップダウン化ができて便利
・パラメータの保存機能

細かい便利機能

・ラベルの詳細の記述
・呼び出し元から非アクティブにして編集できないようにする
・パラメータのリセット

最後に

・近日中にリリース予定
・Bフレットもそのうち出すのでお楽しみに #Vフレット

 

 

 

LT#3 やまだ: 「なんかバグった」と言わせないためのデバッグ

5W2H

何かバグった時は5W1Hヒアリングすると思います
それに加えて、How Many(どのくらい発生するのか)が重要
発生率が低いほど直すのも確認するのも大変→バグが発生したチャンスを逃したくない

5W2Hの情報をどうやって集めるか

デバッグシートの作成→情報の粒度が人によってバラバラ
・テスト仕様書の作成→仕様書にないものに対応できない、テストコードでやったほうが便利

自動で5W2Hを収集しよう

・エラーが発生した時にログを収集する仕組みを作ろう、ログはチャットツールに通知
・開発中にだけにわかりやすい情報を増やそう

まとめ

デバッグの情報は人によってバラバラ
・欲しい情報のヒアリングにコミュニケーションコストがかかる
・バグが発生するとは限らない

→チャットツールのAPIで自動的にログを収集するというのをオススメします

SRDebuggerのオススメ

デバッグをするのに便利なツールです

 

 

 

LT#4 (スポンサー枠) まつの: f4samurai社内ゲームライブラリのパッケージ管理手法

共通ライブラリ

これまではプロジェクトごとにスクラッチで実装していた
→似た機能を共通ライブラリを作りたい

しかし、修正が発生した時の影響範囲がわからないため細かいモジュール単位で管理

どう実現するか

PackageManagerを使う、ライブラリはカスタムパッケージ化してGitHubで管理
パッケージの依存関係はGitDependencyResolverForUnityで解決

github.com

まとめ

・各プロジェクトで共通で使える機能はライブラリ化しましょう
・大きいライブラリだと管理が大変なので、小さい単位で管理
・依存関係はPackageManagerとGitDependencyResolverForUnityで解決
・非エンジニアの人が困らないような配慮が必要

 

 

 

 

LT#5 tktr: アバターの着せ替え・カラバリってどうやるの? / TextMeshProを使った絵文字対応について

バーチャルカラオケ配信アプリ「トピア」のアバター実装についてのお話

アバターの着せ替え実装

素体モデルを用意して衣装メッシュのボーンと素体のボーンを紐づける
衣装モデルSkinnedMeshRenderer.bones配列に対応する素体のボーンを設定。

アバターのカラバリ実装

1衣装につき3色まで色変更可能。
衣装テクスチャとRGBテクスチャを用意して、シェーダー側で色を変更する

TextMeshProを使った絵文字対応

実装して発生した問題

・文字化けの発生(用意されていない絵文字の使用、文字コードが崩れたとき)
→入力終了後に範囲外チェックを行う

・TextMeshProの絵文字は改行位置がおかしくなる
→絵文字の後ろにゼロ幅スペースを置くと単語ではなくなるので改行がされなくなる

解決方法

絵文字を使うならUnityのInputFieldは使用してはいけない
入力はTouchScreenKeyboardで受け取り、TextMeshProで表示

 

 

 

 

LT#6 ふしっきー: Unityで作るパフォーマーのためのモバイルARフィルター

取り組み

パフォーマー向けのモバイルARフィルターを作っています。
・プロダンサーリアルタイム合成配信
・映像コンテストでそれぞれ映像投稿

使用技術の紹介

検出はUnity AR Foundation+iOS ARKit
エフェクトはShader、Trail、ParticleSystem、Vfx Graph

モバイルARフィルター撮影のいいところ

スマートフォンを向けるだけで誰でもエフェクト合成できる
・リアルタイムで体験できる

大変な所

・リアルタイム撮影だと後から編集が難しい
・モバイルなの毎回ビルドが必要
・トラッキング技術難易度が高い

まとめ

制作事例と使用技術についてまとめました
大変だけど楽しく撮影しています

 

 

 

 

LT#7 たけし: そろそろ輪郭線について見直しませんか?

現行の主要な輪郭線の手法

背面法:モデルを拡大して背面を線として描画する手法
輪郭線フィルタ:G-bufferに対して輪郭線検出フィルタを適用する手法

輪郭線について見直し

これからは幾何情報をより多く活用するアプローチだったり、機械学習レイトレーシングを有効活用するアプローチが考えられる。

実際にやってみたサンプル

github.com

ライブラリ

github.com

まとめ

・現行の輪郭線アルゴリズムは良くも悪くも枯れた手法
・ハードウェアの機能を活かすことで発展の可能性あり
・みんなで輪郭線界隈を盛り上げていきましょう

 

 

 

 

LT#8 にー兄さん: VFX Graphの気になるアップデートを軽率に紹介したい

VFX Graphを新機能3つ紹介します

Sample Skinned Mesh

SkinnedMeshをSampleしてくれるノード
メッシュの表面からパーティクルをスポーンしたりなどができる

youtu.be

Sample Graphics Buffer

配列からGraphics Bufferを生成し直感的で便利に。

デモ

github.com

SDF Bake Tool

SDFとは任意の点から形状への距離と方向を保持したデータ。3Dテクスチャとして扱われる。
過去にSDFを使用したVFXで登壇したこともあります

スキャンデータを使った リッチなVFXを軽率に作ろう - Speaker Deck

デモ

github.com

まとめ

・SimpleXX系ノードがアツい
・頑張ればできる機能が頑張らなくてもできるようになった
・アーティスト向けツールとして正当な進化
VFX Graphはいいぞ

 

 

 

 

 

スポンサー紹介

株式会社f4samurai

スマホ向けのゲームの企画・開発を行っています。
採用ページがリニューアルしました!

recruit.f4samurai.jp

 

ワンダープラネット株式会社

プロダクト紹介

crashfever.com

jumputi.game.line.me

 

エンジニア募集中です

www.wantedly.com
技術ブログもやっています

developers.wonderpla.net

 

株式会社キッズスター

子供向けのプロダクトを作っています

biz.kidsstar.co.jp

さまざまなジョブを募集中です。Wantedlyからご応募ください。

www.wantedly.com

 

 

 

 

 

感想

今回もおもしろいLTばかりでしたが、
一番興味を持ったのはLT#3の「「なんかバグった」と言わせないためのデバッグ」ですね。
ピンポイントでぶっ刺さる内容なのでめちゃくちゃタメになりました。
LT#4の「f4samurai社内ゲームライブラリのパッケージ管理手法」も興味深い!

 

 

そしてとうとうごたゆにも20回目!
思い返してみると初めて参加したのが、7回目のGotanda.unityでした。

gotanda-unity.connpass.com

 

たしかUnite Tokyo 2018でとと様と直接話したのが参加したきっかけでしたね。
9回目の時はとうとうLT初登壇もキメてやりました
それ以降も毎回参加していろいろ学ばせていただいています。

raspberly.hateblo.jp

 

参加しすぎてキッズスターの会社紹介はもはや暗唱できるレベルです。
これからもよろしくお願いします。

 

 

 

 

間違っている箇所、消してほしいツイートがありましたらコメントにお願いします。