2015-03-02に投稿

cocos2d-jsにてfirefoxでLabelTTFがずれる

firefoxだとLabelTTFの文字が全部上にずれて上端が切れていて愕然とした。
ただ、WEB版のいいところはjsが完全に独立しているため
どんなに弄ってもAndroidやiPhoneの動作に全く影響を与えない所。

というところで処理を追ってみたところ、
下記のようにオフセットを弄るとそれなりの表示になった。
(修正後、jsがキャッシュされていると反映されないのでうまいことやってください。
動的読み込みなのでしつこいほどキャッシュされます。
自分はパラメータを付けてキャッシュされないようにしてチェックしました)

frameworks/cocos2d-html5/cocos2d/core/labelttf/CCLabelTTFCanvasRenderCmd.js
の234行目あたり。

|javascript|
if (this._isMultiLine) {
var locStrLen = this._strings.length;
if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM)
yOffset = lineHeight - transformTop * 2 + locContentSizeHeight - lineHeight * locStrLen;
else if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_CENTER)
yOffset = (lineHeight - transformTop * 2) / 2 + (locContentSizeHeight - lineHeight * locStrLen) / 2;

for (var i = 0; i < locStrLen; i++) {
    var line = this._strings[i];
    var tmpOffsetY = -locContentSizeHeight + (lineHeight * i + transformTop) + yOffset;
    // ↓ここと、
    if (cc.sys.browserType == 'firefox') {
        tmpOffsetY += 5;
    }
    if (locStrokeEnabled)
        context.strokeText(line, xOffset, tmpOffsetY);
    context.fillText(line, xOffset, tmpOffsetY);
}

} else {
if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM) {
//do nothing
} else if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_TOP) {
yOffset -= locContentSizeHeight;
} else {
yOffset -= locContentSizeHeight * 0.5;
}
// ↓あとここです。
if (cc.sys.browserType == 'firefox') {
yOffset += 5;
}
if (locStrokeEnabled)
context.strokeText(node._string, xOffset, yOffset);
context.fillText(node._string, xOffset, yOffset);
}
||

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, React, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!
ボードとは?

関連記事

コメント