互換性はもう気にしない!cocos2d-xのシステムフォントを装飾する方法

「iPhone6ならうまく表示されるのにな」
「Nexus5ならきれいなんだけどな」
そんな溜息まじりの声がふーじゃんの開発時に聞こえてきました。世の中にいる同じような悩みを持った人のためにcocos2d-xのフォントについて記事を書かせてもらいます!
(※ふーじゃん(風雲麻雀記)は2016年01月14日をもってサービスを終了致しました。)

アプリの作成で名前やパラメータなどシステムフォントで十分なんだけど、そのままだとちょっと見栄えが悪いな〜なんてことがあると思います、日本語だと選べるフォントに限りがあるし。

システムフォントを扱えるLabelクラスにはもともと、enableGlow()、enableOutline()、enableShadow()、などの関数があるのですがOSや機種によって表示がまちまちで安定して使えないことがあるようです。

そこで、互換性を気にせず同様の装飾ができるか試してみました。

いきなりですが試した結果です。

スクリーンショット 2015-03-23 3.11.44

見えなくもない?

方法は原始的ですがテキストを重ねて見栄えを良くしていきます、CSSのテキストシャドウみたいな感じです。

cocos2d-x-3.4で動かしましたがどのバージョンでも行けると思います、フォントは「HiraKakuProN-W3」、サイズは「28」を使用しています。

ここから個別に説明して行きます。

・日本語のシステムフォント(デフォルト)

何もしていません、比較用に置きました。

auto label = Label::createWithSystemFont("日本語のシステムフォント(デフォルト)", "HiraKakuProN-W3", 28);
label->setPosition(400, 575);
this->addChild(label);

・日本語のシステムフォント(ボールド)

基本ラベルと補助ラベルを4つ作成しポジションをずらして配置しています、透明度で丸みを出してみました。

基本ラベルのaddChild()で第2引数を渡し前面に来るようにしておく必要があります、また文字が小さ過ぎると細かい文字は読みにくくなりました。

auto label2 = Label::createWithSystemFont("日本語のシステムフォント(ボールド)", "HiraKakuProN-W3", 28);
label2->setPosition(400, 500);
this->addChild(label2, 1);

auto label21 = Label::createWithSystemFont("日本語のシステムフォント(ボールド)", "HiraKakuProN-W3", 28);
label21->setOpacity(128);
label21->setPosition(label2->getPositionX() - 1, label2->getPositionY());
this->addChild(label21);

auto label22 = Label::createWithSystemFont("日本語のシステムフォント(ボールド)", "HiraKakuProN-W3", 28);
label22->setOpacity(128);
label22->setPosition(label2->getPositionX() + 1, label2->getPositionY());
this->addChild(label22);

auto label23 = Label::createWithSystemFont("日本語のシステムフォント(ボールド)", "HiraKakuProN-W3", 28);
label23->setOpacity(128);
label23->setPosition(label2->getPositionX(), label2->getPositionY() - 1);
this->addChild(label23);

auto label24 = Label::createWithSystemFont("日本語のシステムフォント(ボールド)", "HiraKakuProN-W3", 28);
label24->setOpacity(128);
label24->setPosition(label2->getPositionX(), label2->getPositionY() + 1);
this->addChild(label24); 

・日本語のシステムフォント(アウトライン)

ボールドの補助ラベルの色を変えました。

auto label3 = Label::createWithSystemFont("日本語のシステムフォント(アウトライン)", "HiraKakuProN-W3", 28);
label3->setPosition(400, 425);
this->addChild(label3, 1);

auto label31 = Label::createWithSystemFont("日本語のシステムフォント(アウトライン)", "HiraKakuProN-W3", 28);
label31->setTextColor(Color4B::RED);
label31->setOpacity(128);
label31->setPosition(label3->getPositionX() - 1, label3->getPositionY());
this->addChild(label31);

auto label32 = Label::createWithSystemFont("日本語のシステムフォント(アウトライン)", "HiraKakuProN-W3", 28);
label32->setTextColor(Color4B::RED);
label32->setOpacity(128);
label32->setPosition(label3->getPositionX() + 1, label3->getPositionY());
this->addChild(label32);

auto label33 = Label::createWithSystemFont("日本語のシステムフォント(アウトライン)", "HiraKakuProN-W3", 28);
label33->setTextColor(Color4B::RED);
label33->setOpacity(128);
label33->setPosition(label3->getPositionX(), label3->getPositionY() - 1);
this->addChild(label33);

auto label34 = Label::createWithSystemFont("日本語のシステムフォント(アウトライン)", "HiraKakuProN-W3", 28);
label34->setTextColor(Color4B::RED);
label34->setOpacity(128);
label34->setPosition(label3->getPositionX(), label3->getPositionY() + 1);
this->addChild(label34);

・日本語のシステムフォント(シャドウ)

補助ラベルを2つにして後ろにポジショニングしています、透明度を段階にして影を作っています。

auto label4 = Label::createWithSystemFont("日本語のシステムフォント(シャドウ)", "HiraKakuProN-W3", 28);
label4->setPosition(400, 350);
this->addChild(label4, 1);

auto label41 = Label::createWithSystemFont("日本語のシステムフォント(シャドウ)", "HiraKakuProN-W3", 28);
label41->setOpacity(128);
label41->setPosition(label4->getPositionX() + 1, label4->getPositionY() - 1);
this->addChild(label41);

auto label42 = Label::createWithSystemFont("日本語のシステムフォント(シャドウ)", "HiraKakuProN-W3", 28);
label42->setOpacity(64);
label42->setPosition(label4->getPositionX() + 2, label4->getPositionY() - 2);
this->addChild(label42);

文字サイズ、補助ラベルの数、ポジションなどで色々作れそうなので、「使い所はあるかな」と言うのが私の結論です。

皆さんも用途が出来たら参考にしてみてください。

コメントを残す

メールアドレスが公開されることはありません。