だいあリス

日めくり帳にメモっておくような手軽さを重視したカレンダーメモアプリです。

surfrog.net

アップデート内容はバグ修正です。

さて、以前よりキーボードを閉じるボタンを追加していたのですが、iOS9以降で表示されなくなってしまいました。

UIViewを使ったカスタマイズキーボードの動作が変わっており、変換候補などを表示した後は閉じるボタンが表示されますが、テキスト入力開始時は表示されなくなっています。

UIToolbarを利用すると上手く行くので、UIToolbarを使用してカスタマイズキーボードを作成するように変更しました。

// ツールバーの準備
UIToolbar *keyboardToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, 44)];
// スペース
UIBarButtonItem *extraSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:(UIBarButtonSystemItemFlexibleSpace) target:nil action:nil];
// 閉じるボタン
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[[UIImage imageNamed:@"button_keyborad_back.png"]
	imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
	style:UIBarButtonItemStylePlain target:self action:@selector(closeKeyboard:)];
// スペースと閉じるボタンをツールバーへ追加する
[keyboardToolbar setItems:[[NSArray alloc] initWithObjects:extraSpace, backButton, nil]];

これでキーボードを閉じるボタンができました。

かえるさんのABCクッキーのボーナス時は、背景を動的にグラデーションさせています。この動的なグラデーションの実現に、カラーピッカーのことを調べたので備忘録として記しておきます。

動的グラデーションサンプル

グラデーション方法

saiとかphotoshopのカラーピッカー

ペイントソフトのカラーピッカーも大体の場合においてRGB成分の位相をずらして表現しているので、プログラムでも同じことをすれば動的なグラデーションが可能ということになります。Cocos2d-xにはTintTo, TintByという色を変更する関数が用意されていますが、虹色にグラデーションしようともなると大変なので、Tintは使わない方向でのアニメーションさせてみます。

具体的なコード例

void update(float delta)
{
	static float theta = 0.0f;
	theta += 0.05f;		// グラデーションの更新速度
	GLubyte center = 128, width = 127;	// 色の基準値と増減値

	GLubyte r = sin(theta) * width + center;			// 赤成分
	GLubyte g = sin(theta + 2.0f / 3.0f * M_PI) * width + center;	// 緑成分
	GLubyte b = sin(theta + 4.0f / 3.0f * M_PI) * width + center;	// 青成分

	_layer->setColor(Color3B(r, g, b));	// 色の更新
}

処理内容としては、スケジュール関数にてRGB成分をそれぞれの1/3ずつ位相をずらすことで、グラデーションを実現させています。

この例では基準値を128、増減値を127にしていますので、RGBそれぞれの成分が1～255の値で更新されるので、綺麗なグラデーションになるわけです。

ちなみに、基準値を明るくすればパステルカラーも可能です。

GLubyte center = 220, width = 35;	// 色の基準値と増減値

ゆるい英語学習ゲーム、かえるさんのABCクッキー配信中ですのでよければ遊んで下さい。

ではでは。

ついでにサポートページも

かえるさんのABCクッキー

かえるさんが織りなすABCクッキー屋さんのアプリ もしかしたら英単語を学習できるかも

surfrog.net

今回はちょっと技術的な話を。
かえるさんのABCクッキーにはLive2Dを使わせて頂きました。
イラストをぬるぬるアニメーションさせる技術です。
アメトーークの絵心ない芸人でも使われた実績がありますね。

例えば、このかえるちゃんのイラストが

かえるのイラスト

Live2Dでこんな感じ（gif出力です）

かえるさんgifアニメ

2016/04/08 一旦WebGLを削除
2016/04/09 さらに加筆修正（WebGLである程度動作することを確認）

私がアプリで使用したのはCocos2d-x版のLive2Dですが、Live2DにはWebGL版も用意されています。

WebGL版で動作させてみる

画面にタッチするとアクションします。あと、微妙に呼吸動作で動いているはずです。

※お使いのブラウザ、もしくはスマフォでは動作しない可能性があります。（その際はかえるさんが表示されません）

一度WebGL版を記事にしたはいいけど、自分のiPhoneで表示されなかったりで加筆したり削除したりあれこれしました。上のWebGL版も色々奥が深そうでまだまだ問題がありそうです。す。
ただ、このあたりの技術は非常に楽しそうなので勉強してみたいです。

ちなみに、また問題が見つかる可能性が大なので、将来この記事は消えて無くなっているかもしれません（笑

1枚のイラストからアニメーションがぬるぬる動く。技術的進歩というのは凄いですね。

ではでは。