Y.C.LABの軌跡

夢を実現するために思いを書いていきます

Unityでアプリ「イロドリ」を作る!

こんばんは。ひろし@Y.C.LABです。

 

今日はUnityを使って作ったアプリ「イロドリ」の作り方を書いていこうと思います。

f:id:yclab:20181109013206j:plain(App Storeに飛びます)

 

イロドリでは、まず画面下に用意したImageオブジェクトにランダムで色を配置するところから始まります。

 

f:id:yclab:20181109013517j:plain

 

Unityで(C#で)ランダムな数を発生させるには、

UnityEngine.Random.Range (0f, 1.0f);

 とします。()の中はランダムの数字の範囲。今回は、色を指定するから、0~1のfloat型。

あれ、255じゃないのって思った人、さすがです。

先日の記事にも書いたけど、RGBで色を表す時は0~255の数字を使うんです。

ただ、Unityでは、0~255を正規化して0~1として扱うんです。

で、作ったランダムな数字をred,green,blueに代入しておいて、画面の中のオブジェクトの色を変更させるのは、

GameObject.Find ("Canvas/pal1").GetComponent<Image> ().color = new Color (red, green, blue);

 とします。ここでは、Canvasの中にpal1というImageオブジェクトを置いています。

これを5つ繰り返して、その5つの色からまたランダムで3つの色を選びます。

それを先日の記事の通り混ぜることで、お手本の色を作っているわけです。

//1色目

red[1] = UnityEngine.Random.Range (0f, 1.0f);
green[1] = UnityEngine.Random.Range (0f, 1.0f);
blue[1] = UnityEngine.Random.Range (0f, 1.0f);
GameObject.Find ("Canvas/pal1").GetComponent<Image> ().color = new Color (red[1], green[1], blue[1]);

//2色目
red[2] = UnityEngine.Random.Range (0f, 1.0f);
green[2] = UnityEngine.Random.Range (0f, 1.0f);
blue[2] = UnityEngine.Random.Range (0f, 1.0f);
GameObject.Find ("Canvas/pal2").GetComponent<Image> ().color = new Color (red[2], green[2], blue[2]);

//順次3色目から5色目までを繰り返す。
・・・

//用意した5色の中からランダムな3色を選ぶ
i = UnityEngine.Random.Range (1, 5);
j = UnityEngine.Random.Range (1, 5);
k = UnityEngine.Random.Range (1, 5);

tar_red = (red[i]+red[j]+red[k])/3.0f;
tar_green = (green[i]+green[j]+green[k])/3.0f;
tar_blue = (blue[i]+blue[j]+blue[k])/3.0f;
GameObject.Find ("Canvas/target").GetComponent<Image> ().color = new Color (tar_red, tar_green, tar_blue);
 

 これで、お手本となるtargetというオブジェクトにランダムで選んだ5色の中からさらにランダムで選んだ3色を混ぜた色がセットされたわけです。

ここで、混色の方法に先日の記事の方法を使っています。

 

次は、下に並べた5色のパレットをタッチすると選択できるところですが、ここは、Buttonコンポーネントを使っています。

Unityのオブジェクトを選択して、Inspectorの一番下にあるAdd Componentから、UI→Buttonを選択するとImageオブジェクトにButtonコンポーネントを追加できます。

先ほど作った5つの色をあてがったImageオブジェクトに追加していく感じですね。

 

Buttonの使い方は、スクリプトの中で、

public void OnClick1(){

・・・

}

のようにpublicの関数を作ってあげます。

この関数の中で、タッチされたら、上に用意した丸いオブジェクトの色をタッチしたオブジェクトの色に変更しているわけです。

f:id:yclab:20181109015319p:plain

スクリプトを用意したら、InspectorのButtonコンポーネントの中のこの部分で、Runtime Onlyの下の窓で、そのスクリプトを当てているオブジェクトを選択し、右の選択肢の中からさっき作成したpublicの関数を選択します。

これで、そのオブジェクトがタップされた時にスクリプトで記述した動作をするようになります。

set [1] = GameObject.Find ("Canvas/set1");
set [2] = GameObject.Find ("Canvas/set2");
set [3] = GameObject.Find ("Canvas/set3");
set [set_no].GetComponent<Image> ().color = new Color (red [1], green [1], blue [1]);
set [set_no].transform.Find ("sentaku").gameObject.SetActive (false);
set_no++;
if (set_no > 3) {
    set_no = 1;
}
set [set_no].transform.Find ("sentaku").gameObject.SetActive (true);

ちなみにスクリプトの中身はこんな感じ。選択した色が表示される丸いオブジェクトはCanvas/set1~3というオブジェクトにしました。そこにタッチされたパレットの色を反映しています。

また、今アクティブになっている選択肢を表示するためにsentakuというオブジェクトを表示したり消したりしています。

アプリの中では緑の丸で今変更できる選択肢を示しています。

 

 

ここまでできれば、あとは、決定ボタンを押した時に選択されている3色を混ぜ合わせた色とお手本にしていた色の一致率を計算すれば完成です。

一致率は単純にRGBがそれぞれどれだけずれているかを計算してそれを掛け合わせています。

ittiritu = (1.0f - Mathf.Abs (set_red - tar_red)) * (1.0f - Mathf.Abs (set_green - tar_green)) * (1.0f - Mathf.Abs (set_blue - tar_blue)) * 100.0f;

 Unityで絶対値を扱いたい時は、上記の通り、Mathf.Absでできます。

 

とまぁ、こんな感じでとても簡単に「イロドリ」はできています。

って、全部中身書いちゃってるじゃん!って感じだけど、そんな難しいことしてるわけでもないし、この記事のどこかが参考になってもっと面白いアプリを作る人がいたらいいなと思って全部書きました。

参考になればいいなと思います。

 

また、ここはもっとこうした方がいいんじゃね?ってことがあれば是非是非連絡ください。

twitter.com

 

また近いうちに新しいアプリもリリースします!

それでは、おやすみなさい。。

 

努力と行動の先にワンチャンがあるはず

こんばんは。ひろし@Y.C.LABです。

 

今日はオリエンタルラジオの中田さんの講演会に行ってきました。

常にトライアンドエラーの実験を繰り返す日々を送っていて、お金ともちゃんと向き合っている姿はカッコ良かったです。あっちゃんカッコいーです。

 

で、その講演会の前にツイッターをのぞいたら、オンデーズの方からいいねが押されてたんです。

オンデーズ知らない人はこの本読むべし!(めちゃくちゃ面白いです)

 

しかも、オンデーズに関係していないツイートなのに。で、間違いだよなーってツイートして、講演会が終わってからまたツイッターを覗くと、、

 いや、嘘でしょ!って感じでした。

よく、発売された本とかのツイートしているのをいいねしたりリツイートしている人は見かけるんですけど、フォロワーの投稿までチェックできる人います!?

しかも本に登場するNo2の方ですよ!

 

中田さんの話もそうだし、奥野さんのツイッターもそうですけど、やっぱり人以上に努力と行動をしていないとそこまで辿り着けないんだなと改めて思い知らされました。

と同時に、なんかすごいきっかけをもらった気がして、やるぞー!って感じになってます。

 

中田さんの講演会の最後の質疑応答で、どこを目指してるんですかって質問があって、その答えが1つのゴールを目指していないってことでした。

なんか決められたルールの中で継続してその先にあるゴールを目指すのではなく、常に楽しいと思えることに挑戦しているのだと。

いい!めっちゃいい!

てか俺もそうしているつもりです。

その先にゴールなんてないかもしれないけど、常に行動しよう。今日もこれからアプリまた作るぞー!

 

で、奥野さんがいいねしてくれたアプリ「イロドリ」よろしくお願いします。

イロドリ

イロドリ

  • Hiroshi Sato
  • ゲーム
  • 無料

 ポスコレも地味にユーザー増えてます。

ポストコレクション

ポストコレクション

  • Hiroshi Sato
  • 旅行
  • 無料

 

やるぞ!

unityで自作アプリを作る!

こんばんは。ひろし@Y.C.LABです。

 

早速ですが、イロドリをアップデートしました。

5色の中から3つを選んでお手本と同じ色にするというのは意外と難しく、答えを最後に表示することにしました。(Apple審査中)

また、画面上部にバナー広告であるAdMobを配置しました。

f:id:yclab:20181030234138j:plain

無料アプリのマネタイズをどこでするかってちゃんと考えておかなくちゃいけないんだけど、今は使い手側に最小限のウザさで済むバナー広告を選択しています。

たまに画面全体に広告が出てきてどこを押せば消えるのかがパッとわからないアプリとか本当にウザいと思うので。

 

でここら辺のAdMobの載せ方とかもそのうち記事にしたいと思ってます。自分の備忘録にもなるし。

 

今日はunityについて簡単に紹介したいと思う。

今回作成したイロドリもそうだし、以前に作成したポストコレクションもunityというソフトを使って作ったアプリです。

イロドリ

イロドリ

  • Hiroshi Sato
  • ゲーム
  • 無料

 

ポストコレクション

ポストコレクション

  • Hiroshi Sato
  • 旅行
  • 無料

 前に書いた記事でもunityのことは紹介しているけど、今回はもう少しunityについて詳しく書いてみようと思う。

unityはクロスプラットフォーム開発をすることができるシステムで、要はこのソフトで作ったアプリはiOSiPhone)でもAndroidでも動かすことができるよっていうすごいソフトなんです。

他にもいくつもクロスプラットフォーム開発できるシステムはあるのでググってみてください。

 

で、unityは物理演算なんかも得意でゲームとかを作るのに向いています。

操作としては、画面にオブジェクト(ボタンとか、ゲームだったらボールとか、アプリ内で使うモノ)を配置して、それに対してC#でプログラムを組む感じ。

画面としては、

f:id:yclab:20181031000104p:plain

こんな感じです。ちなみにイロドリを作っている真っ最中の画面です。

真ん中にある画面がまさにスマホの画面って感じで、ここにパレット用の四角を配置したり、お手本となる色を表示する丸を配置したりしています。

で、その四角とか丸とかをタップした時にどう動くかってのをC#ってプログラムで指示しています。

 

文章にすると簡単なんだけど、中では、データベースを持っているサーバと交信していたり、最初に書いたAdMobの設定をしたりと見えないとこでもいろいろやってるんです。

そこら辺も備忘録として次のアプリ作りながら記事にしようと思います。

ってか一緒に作りたいって人いたら連絡してください。

 

今でこそこれくらいの簡単なアプリだったらサクッと作れるようになったけど、最初はボロボロでした。

最初に読んだ本がこれで、unityの基本的な操作方法やプレハブの考え方とか参考になるんだけど、やっぱり自分で触って作ってみるのが一番身につくと思います。

 

 次はunityで何作ろうかなと思いながら今日も夜更かししてます。

 

フォローよろしくお願いします。

twitter.com

 

 

プログラミングで色を混ぜる

こんばんは。ひろし@Y.C.LABです。

 

今日は色を混ぜるプログラミングについて考えてみたいと思います。

f:id:yclab:20181026230553p:plain

 

色の表現方法

色を表現する方法はいろいろとあって、よく知られているのは、RGB(レッド、グリーン、ブルー)の割合から色を表現するもの。ちなみに最大値は255。

赤だったらRGB = 255,0,0みたいな感じ。

これは、光の三原色である赤と緑と青を組み合わせていろんな色を表現しようというもので、加法混色と呼ばれていて、足せば足すほど白に近づいていくという方法。

主に映像の分野で使われている。

 

一方、印刷の分野で使われているのは、CMYK(シアン、マゼンタ、イエロー、キープレート(黒))というもの。

足していけば黒に近く減法混色と呼ばれるもの。

プリンタのインクなんかはこっちの表現ですね。

 

今回はプログラミングで色を混ぜることを考えたいと思うので、RGBの表現をベースに進めたいと思います。

 

色の足し算

プログラミングで、例えば赤(RGB=255,0,0)と青(RGB=0,0,255)を足すということを考えてみる。

 

(1)正規化混色(勝手に名前を付けています)

単純に足すと、RGB=255,0,255となってそれらしい紫になる。

では、それにさらに赤を混ぜたらどうなるか。

また単純に足すと、RGB=510,0,255となり、最大値の255を超えてしまう。

ここで、正規化をして、255を超えたものは255となるように調整すると、

RGB=255,0,127となる。

 

こんな感じで、単純に足して、255を超えた場合は、最大値が255となるように割り算をする方法をここでは正規化混色と呼ぶことにした。

プログラミング的に表すと次の感じだ。(混ぜる色を(R1,G1,B1)と(R2,G2,B2)として、混ぜ合わせた後の色を(R3,G3,B3)とする)

R3 = R1 + R2 ;

G3 = G1 + G2 ;

B3 = B1 + B2 ;

MaxRGB = Max(R3,G3,B3);

if(MaxRGB > 255){

    n = MaxRGB / 255 ;

    R3 = R3 / n ;

    G3 = G3 / n ;

    B3 = B3 / n ;

}

f:id:yclab:20181028224204p:plain

しっくり来る人とこない人がいそうな結果。。

これ例えば黒(0,0,0)あるいは、黒に限りなく近い色を足した場合、何も起こらないんです。0を足すだけなので。そこで次の方法を考える。

 

(2)平均化混色(これも勝手に名前付けてます)

名前から想像がつくと思いますが、混ぜる2色のRGBそれぞれの平均を取っていく方法。

赤(RGB=255,0,0)と青(RGB=0,0,255)を足すと、RGB=127,0,127となる。(念の為(255+0)/ 2 = 127)

これにさらに赤(RGB=255,0,0)を足すと、RGB=191,0,63となる。

R:(127 + 255)/ 2 = 191

B:(127 + 0)/ 2 = 63

のため。

プログラミング的に書く必要はないと思うけど、

R3 = ( R1 + R2 ) / 2 ;

G3 = ( G1 + G2 ) / 2 ;

B3 = ( B1 + B2 ) / 2 ; 

f:id:yclab:20181028230323p:plain

なんとなくそれっぽく見えてきた!

からこれで良しとしよう。

 

ってか(1)の正規化混色で、正規化しないで255を超えたものは255のままにしておくというのもありだと思う。ただ、いずれにしろ、足していくだけでは、黒に近付けることができないという点は変わらない。

まさに加法混色をしているということだ。

 

ってか、色ってもっと複雑で、明度とか彩度とかいろんな要素があるし、そもそも人によってや目の色によっても見え方が違うからこれだって方法はないんじゃないかと思うし、ググればなんだか難しそうな式も見つけちゃったりしたんだけど、それらは一旦置いておくことにする。

 

まとめ(と見せかけてアプリの宣伝)

で、それっぽく見えた平均化混色の手法を使って(手法ってほど大したものではないが)色を混ぜて遊ぶアプリを作りました。

 

イロドリ

イロドリ

  • Hiroshi Sato
  • ゲーム
  • 無料

 

画面上部の丸のお手本の色になるように下の5色のパレットから3つの色を選ぶ感じです。

 

f:id:yclab:20181028231900j:plain

超絶シンプル。

ここで、注意したいのは、絵の具っぽいこと言ってるけど、結局は上で紹介している平均化混色を行なっているだけなので、実際に混ぜた感じと違うんだけどーってことは普通にありえます。

 

逆にプログラミングで混色するならこんな手法がいいよ!ってのを知ってる人は教えてください。

また、アプリももっとこうしたらいいのにってのがある人は言ってください。

全力で改善します。

 

ひろし@Y.C.LAB (@yc_lab) | Twitter

ツイッターでDMでもしてください。

 

最後に、自分みたいな素人が配色に困った時に参考にしている本を紹介して、今までで一番長いブログを終わりにしようと思います。

100以上のコンセプトに沿った色が9色ずつ紹介されているので、パッと開いたところや、パラパラめくって気になった配色を使うことができます。もちろん、RGBやCMYKの値も全て記載されているので、超便利です。

 

次回はこの混色アプリの作り方(unityで作りました)を紹介しようかと思います。

 

それではお休みなさい。

 

 

 

 

 

山中ラボ2.0

お久しぶりです。ひろし@Y.C.LABです。

f:id:yclab:20181026005214j:plain

約2ヶ月ぶりの更新となってしまいましたが、この間にいろいろなことがありました。

 

まずは、クラウドファンディングの失敗。

これについては、応援してくださった方々、本当に申し訳ありませんでした。

まだまだ人様からお金を頂くレベルに達していなかったということだと思います。

今回のことで、クラウドファンディングは集金装置ではなく、信用の換金装置だということがよくわかりました。

まずは信用を貯めたいと思います。

 

 

実はこの2ヶ月、何もしていなかったわけではないんだけど、完全に創作活動はストップしてしまっていました。

この原因とかは、いつか思い出して笑い話になったら書こうと思います。

 

クラウドファンディングの失敗や、2ヶ月の空白期間を経て、勝手にY.C.LABをアップデートすることにしました。

いろいろ考えて、頭がクラクラするくらい考えて、考えて考えて考えた結果、考えて答えが出るほど甘くない!という考えに至りました。

ということで、もっともっともっと行動しようと思います。

 

まずは決意表明までということで、近いうちにいろいろと始めます。

今後もよろしくお願いします。

生まれ育ったトコ

こんばんは。ひろし@Y.C.LABです。

 

先日、生まれ育ったところである、池尻大橋駅周辺をぶらぶらしてみた。

かなり久しぶり。多分5年ぶりくらい。

 

相当急な思いつきで行ったため、夜の9時すぎに到着。

色々と写真を撮ったけど暗すぎるし、完全に不審者だった気がする。

 

通っていた小学校(完全に別物に生まれ変わっていた)や中学校を歩いて廻って、懐かしいなーと。

ちょっと地元に戻ったらなんか感じることあるんじゃないかなと思って急遽行ってみたんだけど(そんな遠くないんだけど)池尻大橋はあまり変わってなくてなんだか安心した。

毎日変化する渋谷の隣の駅なのに、この安定感は素晴らしい。

 

そして何より、そんな池尻大橋に拠点を構えたいと改めて強く感じた。

前から冗談半分で池尻大橋にY.C.LABの拠点を作るぞ!と言っていたが、本気度が増した。

 

小学生や中学生だったあの頃の自分達に、大人になるのって楽しいぞ!って伝えてあげられるように思い切りやる。

 

思い立ったらやろう。遅すぎることはない。今が最先端。

(自分に言い聞かす)

 

さて、何から始めようかな。

このどうでもいい投稿から池尻大橋ストーリーが始まるといいな。

ポストコレクションの数字関係

こんばんは。ひろし@Y.C.LABです。

 

今日はポストコレクションに関する数字関係を公開して、考察をしてみようと思う。

 

↓↓日本全国に12万以上ある郵便番号をその場に行くことでコレクションするアプリ「ポストコレクション」

 

f:id:yclab:20180827010054p:plain f:id:yclab:20180827010058p:plain f:id:yclab:20180827010102p:plain

 

さて、そのアクティブユーザー数だが、この一週間(2018.08.20~08.26)で、15名。

ログイン回数は、

月曜日:6回

火曜日:7回

水曜日:3回

木曜日:4回

金曜日:12回

土曜日:7回

日曜日:5回

だった。

 

この一週間での足跡の記録数は、225箇所。

 

これ見て、使われてねーなと思う人が大半だと思うが、ポストコレクション以前にリリースしたアプリの使われなさ具合からすると、かなり使われているという実感がある。

なにせ、無名のY.C.LABが作ったアプリを15名の方が使ってくれているのだ。

感謝。

 

ただ、このままだとさすがにモチベーションも保てないから、ユーザーを増やしたい。

そのための戦術としてクラウドファンディングに挑戦している。

 

camp-fire.jp

 

今日は数字から考察をするということで、曜日ごとの数字に着目して戦略を考えようと思ったが、このユーザ数だと、ある人の1日のログイン数でかなり左右されてしまうため、正確さはあまりない。

ただ、今の段階で言えることは、週末にかけて若干ログイン数が増えるということだ。

これは、こちらが期待している、普段の通勤通学の移動中に使うということがあまりないということだと思う。

週末にかけて、距離的に大きな移動があるタイミングで、ポストコレクションを起動しているのだろう。

 

となると、やはり普段の移動で使える仕組みがないと、ユーザー数は増えない。

 

今のところ、郵便番号に紐づいたコメント機能を予定しているが、もう少し気軽に起動して使える仕組みを考えたい。

 

ちなみに、このアプリで広告をバンバン売って一儲けしようなんてことは考えていない。

ただ、作ったものをたくさんの人に使ってもらうことで、次へのフィードバックとY.C.LABの認知度を上げることで、次のモノづくりをしやすい環境を作りたいと思っている。

 

もちろん、ポストコレクションをもっといいアプリにして、たくさんの人に楽しんでもらいたいという思いが一番だ。

 

ポストコレクションを普段使いできるアプリにするためにいいアイデアがある人は、是非コメントください。

TwitterへのDMでもOKです。

 

twitter.com