【Pasteur】UI改善

| トラックバック(0)

どうも、ケイ・プロジェクトの中の人 あ〜る です。
 
5月、東京インディーフェスティバル2015 に出展させていただきました。
その中で UI がわかりにくいというご意見を頂きました。
直接ご意見を頂かない場合でも、プレイしてもらっている時にわかりにくそうだな、という風に見える場面も多々ありました。
これはどうにか改善しなければなぁ、ということで考察しました。
 
まずは改善前の UI を見てみましょう。

 
主に以下4点が修正ポイントです。
1)
各色の薬ボタンを押した時の破れた表現が、選択中なのか非選択なのか分かりにくい
 
2)
各色の薬ボタンを押した時に色が見えなくなるので、今何色を選択しているのかがわからない
 
3)
今攻撃可能なウィルスが左に表示されているが、右から左の目線移動になじみがないからか気付かれない

4)
Pasteurボタンを使うタイミングがわからない
 
ということで、改善をしたものがコチラ↓

 
修正方法は
1)
選択中の薬の周りが光るようなエフェクトを追加
 
2)
選択中でもカラーが残るようなデザインに変更
 
3)
目線の移動を上から下と自然になるように変更。さらに各ボタンからラインを引くことで、より合成されている感を演出
 
4)
3色混合した時に Pasteur が発動していなかったら Pasteur ボタンからのラインを点滅させる
 
 
どうでしょう?
少しはわかりやすくなったでしょうか...。
 
展示会で生の意見が聞ける、リアクションが見れるというのはとてもいいことだなぁと思いました。
これだけでも出展した価値があると思います!
(もちろん他の出展者さんとの交流なども十二分に価値のあることなのですが。)
 
ということで、機会があればこういった展示会に積極的に参加していきたいと思います。

どうも、ケイ・プロジェクトの中の人 あ〜る です。
 
前回予告通り、実際にスイッチをつないで行こうと思います。
 
とは言え、いきなりスイッチをつなげるのではなく、ちょっとした事前準備を。
ケーブルを直接ボードにハンダ付けしてしまうと後々面倒になりそうなので、色々つけたり外したり簡単に出来るようにしようと思います。
 
ボードにピンソケットをハンダ付けして、スイッチ側にはピンヘッダをつなぐことにしました。
こうする事で抜き差しが出来るようになると考えました。
トーシロの考えなので正しいかどうか全くわかりませんが...とりあえずやってみよう!
ボード側をピンヘッダにしなかったのは...見た感じピンソケットは切り離しが難しそうで、スイッチなどに1つずつ接続するのに向かないなと思ったからです。
見た目だけで判断するトーシロです。
 
USBIO_03.JPG
↑こいつがピンヘッダ(というらしい)
L字型になっているのもあるんですね。便利。
 
USBIO_04.JPG
↑こいつがピンソケット(というらしい)
どう見ても切断しにくそう...。

 
そしてなれないハンダ付けの結果...
ボードにピンソケットがつながりました!
USBIO_05.JPG
裏側はこんな感じ↓。
USBIO_06.JPG
 
そしてタクトスイッチというパーツにケーブルとピンヘッダをつなぎます。
 
USBIO_07.JPG
↑こいつがタクトスイッチ(押しているときだけつながる)

USBIO_08.JPG
ボタンを押すと2つ並んだ金具部分がつながる仕組み。
向かい側につながるのかと思ったら違った...ということで間違った接続が残ってます......。
 
そしてついに!
PCに接続してみると、一発でスイッチON/OFFが取れました!
(タクトスイッチの接続間違えたので正確には二発でしたが...)
 
 
さて、トーシロは次にどこに行くのでしょうか。
乞うご期待!

どうも、ケイ・プロジェクトの中の人 あ〜る です。
 
突然ですが...自作のスイッチなどをPCに入力したい!
この分野は完全にトーシロですが頑張っていこうと思います。
とまあ、そんな風に思い立ちまして色々調べてみました。
 
そしてたどり着いたのが、USB-IO2.0 というもの。
秋葉原の秋月電子通商で買ってきました。
USBIO_00.JPG
先日アキバでマリオカートに遭遇したとツイートした時、これを買いに行ってたんですね。
この写真だと大きさがわかりにくいですが、私の人差し指と比べてみると...
USBIO_01.JPG
ちっさい!接続とか大変そうだ...。
 
とりあえず、WindowsPCに接続して付属のソフトを起動してみると...
説明通りすぐに認識してくれました。
トーシロにはとてもありがたいですね。
これで1000円なら安いなぁ...。
 
ポート2はプルアップ回路というのが内蔵されているので入力確認をサクッとするのにとても便利そうです。
プルアップ回路とは...?
プルアップ回路の無いポート1の各入力ピンでは、放置しているとONになったりOFFになったりと不安定な状態になってしまいます。
この不安定な状態をなくすために、常に電源につながっている状態の回路になっているのがプルアップ回路...らしいです。
なので、ポート2の各ピンは放置していると電圧がかかった状態、すなわちONの状態になっています。
ポート2の各ピンをGND(グランド)につなげると、電圧がかかっていない状態、すなわちOFFの状態になるという仕組みです。
 
何もつないでいない状態での付属ソフトの表示はこんな感じ。
接続なし.png
 
そして、P2-0をGNDにつないでみると...
USBIO_02.JPG
(※ハンダ付けせず、ただ線をピンの穴に通しただけです。)
接続あり.png
OFFになった!
(※赤丸で囲ったところに注目です!)


ということは、この接続ケーブルの途中にスイッチをつなげれば、自作スイッチのON/OFFをPCで検知することができちゃう!
あれれ...ずいぶん簡単に出来ちゃいそう。
ま、自分でやれそうだって判断してここまで来るのに結構色々調べてるんですけどね。
 
ということで、次回実際にスイッチを接続しちゃいます。

どうも、ケイ・プロジェクトの中の人 あ〜る です。
 
前回、ウィルスは色分けされて、増殖して隣接すると色が混ざり合って新種が生まれると いう仕様にしたと書きました。
 
でも、RGB三色合体してしまうと白くなってしまう...。
白って清潔なイメージじゃないですか。
なんだか最凶ウィルスには似つかわしくない。
やっぱり黒い方がいいよね...ということで色に関する仕様を考察しました。
 
結論から言うと色を引き算するという手法です。
白 = R + G + B から各色をひいていくと
 白 - 赤 = (R + G + B) - R = G + B = シアン
 白 - 緑 = (R + G + B) - G = R + B = マゼンタ
 白 - 青 = (R + G + B) - B = R + G = イエロー
となります。
さらに2色混合の場合は
 白 - (赤 + 緑) = (R + G + B) - (R + G) = B = ブルー
 白 - (赤 + 青) = (R + G + B) - (R + B) = G = グリーン
 白 - (緑 + 青) = (R + G + B) - (G + B) = R = レッド
となります。
3色混合の場合は全色ひかれるので黒になりますね。
 
ということで、薬の色も同様になるので、薬の基本色が シアン / マゼンタ / イエロー というちょっと不思議な感じになっています。
 

で、それを実装した結果がコチラ↓

 
RGB という考え方に慣れている方にはちょっと違和感があるんじゃないかと思いますが、こんな仕様になっているということでご納得いただければなぁ、と思います。

どうも、ケイ・プロジェクトの中の人 あ〜る です。
 
先日開催された東京インディーフェスティバル2015について
忘れないうちに個人的な感想など少々書こうかと思います。
 
まず感謝したいのがボランティアの通訳の方。
実際に通訳していただいたことはなかったんですが
今回のフェスは外国チームの参加が多くて
思いのほか国際色豊かだったなー、と思います。
その中で通訳の方がいてくれるというだけで安心感がありました。
特に、初日の夜のパーティの時に話しかけてくれて
仲良くなった方がいたので、とてもラッキーでした。
 
それと隣のブースで仲良くしていただいたトコさん。
http://www.to-co.net
お一人で展示されていて、トイレにも行けず孤軍奮闘。
会期後具合が悪くなってないか若干気になります...。
ファミ通.com にも取り上げられていたようですよ!

 
ケイプロがこういった展示会に出展するのは初めてだったんですが
今までお付き合いのなかった方達と交流が生まれたというのは
とても貴重な体験だったと思います。
それに、ユーザの生の声を聞けて、リリース前にも関わらず
どう改善すればよいのか見えて来たのは大きな収穫でした。
 
そしてこうやって露出を少しでも増やして
一歩一歩前進するしかないのかな、と思いました。
準備でバタバタしたり、当日は体の節々が...という
苦労ももちろんあるんですが、それ以上に楽しい体験でした。
皆さんも是非、展示する側で参加してみてはいかがでしょうか。
 
書きたい事はいっぱいあるんですが
とても個人的な事になりそうなのでこの辺で。

どうも、ケイ・プロジェクトの中の人 あ〜る です。
 
前回...お蔵入りを覚悟した Pasteur ですが
クレヨラが救世主となったのでした。
 
ウィルスを色分けして、それに対応した薬を使う事で
同じ色のウィルスだけを消去できる、という仕様。
 
なるほど!面白いかも!と思い、少し考察して
整理してみる事にしました。
 
まずどんな色のウィルスにするのか...。
色と言えば、RとGとBですよねー。
ということで3色ということを考えたのですが、
増殖していったとき、別の色が隣にある場合は
それ以上その色は増えなくなってしまう...。
 
ちょっと違うよな...と思った時
色なら混ざり合うだろうということに思い至りました。
ウィルス同士が接触して、新種に成長するイメージです。
 
そして、薬のボタンも3色だけにして
薬を調合するイメージで色を合わせるようにしました。
 
ですが...最終的には3色合体するのでしょうが
RGBを合わせると白くなるんですよね...。
 
この点については...また次回!!

どうも、ケイ・プロジェクトの中の人 あ〜る です。
ずいぶん時間が空いてしまいました...。
サラリーマンの悲しさで、やはりプロジェクトの繁忙に
左右されてしまい...という定番の言い訳終了。
 
さて、前回は初期の仕様について話しましたが
今回は改良仕様についての話。
 
前回簡単すぎたということで、次に試したのが
すぐに次の消去が出来ないようにするという仕様。
パワーゲージをつけて、一定時間経過しないと
次の攻撃が出来ないようにすると同時に
パワーを溜めれば溜めるだけ攻撃力が上がって
大きなウィルスも消去出来るようになるというもの。
 
これ、言葉で聞くといい感じなんですが......
ウィルス増殖力よりも短い間隔で攻撃出来てしまうと
結局最初と同じだし、長い間隔にすると
絶対的に勝ち目がない感じになってしまい...イマイチでした。
 
ということで、さらにアレンジ。
一定数のウィルスを消去すると、
一定時間ウィルスの増殖を止められる薬が
使えるようになるという仕様。
 
この仕組みはなかなか面白くて
最終的な仕様になった現在でも残っています!
 
でも、この仕様を投入しても
やってみるとどうにも爽快感がない。
パワーよりもフラストレーションが溜まるんですよね...。
ガンガン消したいのに、待たなきゃいけないという
ジレンマを感じるゲーム性ならいいのでしょうが
それを目指していた訳でもなく...。
 
という状況で若干の手詰まり感が......
これはお蔵入りかと覚悟した時
クレヨラからウィルスの色ごとに消せるようにしたらどうか
という提案がありました。
 
これはどんな事かというと......
長くなって来たので、次回に書きたいと思います!
(ここまで更新がない割に引っ張ってしまってスミマセン...。)

どうも、ケイ・プロジェクトの中の人 あ〜る です。
 
前回予告したウィルスを消去する方法についてです。
当初考えていたのは、
「タップしたチップを中心に 5x5 マスのウィルスレベルを 3減らす」
という仕様。
その動きがこれ↓

ウィルスが消えて形が変わる様が面白い!
...って思うのは僕だけでしょうか。
 
でも一見良いように見えるんですが
実際の端末でやってみると...めっちゃ簡単...

これじゃゲームにならんですわ、というレベル...。
 
PC上での確認だとマウスなので
別の箇所をクリックするのに
それなりに時間がかかるのに対して、
実機でタッチになると予想以上に
連打が出来てしまうことから
全然違うプレイ感になってしまうんですね。
 
ということで、仕様変更。
 ・指をスライドして範囲を決める
 ・範囲が広いほど威力が弱くなる
というもの。
 
で、試してみると...。

なんか良さそう??
 
でも実際に実機で試してみると...
簡単すぎるッッッ!!
メンバーの皆も見た目は面白いんだがなー...
という微妙な反応。
可能性は感じるんですが、まだゲームとして成立してない!
 
ということで、次回はこの状態から
現在の仕様に至るまでを書きたいと思います!

iOSでAdMobを

| トラックバック(0)

どうも、ケイ・プロジェクトの中の人 あ〜る です。
 
発掘王でAndroidでのAdMob組み込みは
すでに経験しているんですが
今回は iOS で AdMob を実装しました。
 
組み込み方は色々なところで紹介されているので
そこは既存の情報をググってくださいということで
今回は、その情報通りにやっても引っかかったところを
書きたいと思います。
 
今回利用した SDK のバージョンは 6.12.2 です。
で、ビルドしたところ、リンカエラー...。
どうにも追加する framework が足りないようです。
エラー内容を見ると、
CT*** とか AS*** とか EK*** とか
そんなワードが出てくるので
多分この辺りだろうなー、と思って追加したのが
これら↓の framework です。
 CoreTelephony.framework
 AdSupport.framework
 EventKit.framework
 EventKitUI.framework
で、これがまさにビンゴでした。
 
エラー内容を見てある程度推測すれば対処可能だったので
そんなに時間はかからず解決できました。
エラーが出た瞬間慌てるのではなく、よく見る事が大事ですね。
 
しかしビルドが通って喜び勇んですぐ実行したら
実行時にエラーが発生......。
これは色々情報出てると思いますが
どうやらリンカの設定が必要なようです。
 Build Settings -> Linking -> Other Linker Flags
の値を
 -ObjC
とする必要があるようです。
 
ビルド出来たからって浮かれてるなよ、という戒めですね...。
気をつけます...。

【追記 2015/02/14】
twitter の方である方からご指摘頂きました。

以下のURLで公式に説明されていました!
https://developers.google.com/mobile-ads-sdk/docs/#ios

ちゃちゃっとググって実装しちゃうもんだから
こんな簡単なことも見逃しちゃうんですね。
お恥ずかしい限りです......。

どうも、ケイ・プロジェクトの中の人 あ〜る です。
 
前々回に予告したウィルス増殖についての話です。
 
前々回、アイディアの出発点はライフゲームと書きました。
ただ、ライフゲームの一般的なアルゴリズムをそのまま使うと、
消滅してしまうウィルスが発生してしまい
アクションパズル(?)ゲームとして成立しません。
なので、消滅する事はなく、増殖部分のみにフォーカスしました。
 
というか、もはやライフゲームのエッセンスだけいただいて
ほぼ独自のアルゴリズムです...。
しかもここまで大仰に書いておきながら大した話でもなく...。
 
さて、言い訳もしたところで、ようやく本題。
まず前提として、以下の仕様を考えました。
 1) フィールドは 50x50 のチップ
 2) ウィルスには Lv1 〜 Lv5 までの5段階がある

次にウィルスの発生と成長の仕様。
 1) 3秒毎にランダムでどこかのチップにLv1ウィルスが発生
 2) ウィルスは1秒毎に Lv が1上昇する
 3) Lv上昇時、すでに Lv5 ならば上下左右のチップに Lv1 ウィルスを発生させる
 
非常にシンプルです。これだけ。
で、これを実装するとこんな感じの見た目になります。

Lv によって大きさと色を変えているので
上記仕様のみから想像されるものより
多少見た目が 派手になっています。
 

手前味噌になってしまいますが、
ただの丸が増えて行くだけなのに
なぜかウィルス感があって
なかなかキモチワルイ!
 
なんだかちょっと面白くなりそうな予感です!
...でも結局最終的には、この仕様は採用されていないんですがね。
その話はもう少し先でしますが、
次回はこの状態でどうやってプレイヤーがウィルスを消去するのか
というところを説明したいと思います。