PR

ラベル

Cocos Code IDEとLua言語を使ったサンプルコードと例文集です。

ラベルを使うとテキストを画面に表示することができます。

サンプルコード

プロジェクトの新規作成で作成されるGameScene.luaのGameScene.create()を下記のサンプルコードと書き換えます。 サンプルコードを実行するとラベルが画面中央に表示されます。

function GameScene.create()
    local scene = GameScene.new()
    local visibleSize = cc.Director:getInstance():getVisibleSize()

    local label = cc.Label:createWithSystemFont("Hello world !", "Arial", 18)
    label:setPosition(visibleSize.width/2, visibleSize.height/2)
    scene:addChild(label)

    return scene
end

ss_label.png

ラベルの例文

システムフォントからラベルを作る

システムフォントからラベルを作るにはLabelのcreateWithSystemFontを使います。

local label = cc.Label:createWithSystemFont("Hello world !", "Arial", 18)

ラベルの表示領域と横方向の揃え、縦方向の揃えを指定して作成するには、以下のようにします。

local label = cc.Label:createWithSystemFont("Hello world !", "Arial", 18, cc.size(200, 18), cc.TEXT_ALIGNMENT_CENTER, cc.VERTICAL_TEXT_ALIGNMENT_CENTER)

Labelクラス:createWithSystemFont(text, font, fontSize, dimensions=cc.size(0,0), hAlignment=cc.TEXT_ALIGNMENT_LEFT, vAlignment=cc.VERTICAL_TEXT_ALIGNMENT_TOP)

  • (string) text:テキスト
  • (string) font:フォント名
  • (float) fontSize:フォントサイズ
  • (size_table) dimensions:テキストの領域サイズ
  • (int) hAlignment:水平方向揃え
  • (int) vAlignment:垂直方向揃え

水平方向

  • cc.TEXT_ALIGNMENT_LEFT(左揃え)
  • cc.TEXT_ALIGNMENT_CENTER(中央揃え)
  • cc.TEXT_ALIGNMENT_RIGHT(右揃え)

垂直方向

  • cc.VERTICAL_TEXT_ALIGNMENT_TOP(上揃え)
  • cc.VERTICAL_TEXT_ALIGNMENT_CENTER(中央揃え)
  • cc.VERTICAL_TEXT<_ALIGNMENT_BOTTOM(下揃え)

TTFファイルからラベルを作る

TTFファイルからラベルを作るにはLabelのcreateWithTTFを使います。

PixelMplus(ピクセル・エムプラス)というフォントをお借りしてテストしました。

以下のサイトからダウンロードできます。
PixelMplus
使用の際、ライセンスはダウンロード先で必ず確認してください。

- ラベルのサイズを指定しない場合
local label = cc.Label:createWithTTF("Hello world !","res/PixelMplus12-Regular.ttf", 12)

-- サイズを指定する場合、左揃えや中央揃え等が使える
local label = cc.Label:createWithTTF("Hello world !","res/PixelMplus12-Regular.ttf", 12, cc.size(200,12), cc.TEXT_ALIGNMENT_LEFT, cc.VERTICAL_TEXT_ALIGNMENT_TOP)

-- TTFConfigを使う場合
local ttfConfig = {}
ttfConfig.fontFilePath="res/PixelMplus12-Regular.ttf"
ttfConfig.fontSize=18
local label = cc.Label:createWithTTF(ttfConfig,"Hello world !", cc.VERTICAL_TEXT_ALIGNMENT_CENTER, 200)

Labelクラス:createWithTTFメソッド

createWithTTF(text, fontFile, fontSize , dimensions=cc.size(0,0), hAlignment=cc.TEXT_ALIGNMENT_LEFT, vAlignment=cc.VERTICAL_TEXT_ALIGNMENT_TOP)

  • (string) text:テキスト
  • (string) fontFile:フォントファイル名
  • (float) fontSize:フォントサイズ
  • (size_table) dimensions:テキストの領域サイズ
  • (int) hAlignment:水平方向揃え
  • (int) vAlignment:垂直方向揃え

createWithTTF(ttfConfig, text, alignment=cc.TEXT_ALIGNMENT_LEFT, maxLineWidth=0)

  • (table) ttfConfig:フォントの情報を格納したTTFConfigテーブル
  • (string) text:テキスト
  • (int) alignment:垂直方向揃え
  • (int) maxLineWidth:1行の最大幅

ビットマップフォントからラベルを作る

ビットマップフォントからラベルを作るにはLabelのcreateWithBMFontを使います。

local label = cc.Label:createWithBMFont("bmfont.fnt", "Hello world")

ラベルの色を設定する

ラベルの色を設定するにはsetColorを使います。

label:setColor(cc.c3b(255, 255, 0)) -- 黄色

テキストの内容を変える

ラベルのテキストの内容を変更するにはsetStringを使います。

label:setString("hello")

文字を装飾する

TTFファイルから作成したラベルは装飾が可能です。グローと縁取りは同時に使用できないようです。

label:enableGlow(cc.c4b(0, 0, 255, 255)) -- グロー (注意:上記参照)
label:enableOutline(cc.c4b(0, 0, 255, 255), 2) -- 縁取り 赤 幅2
label:enableShadow() -- 影
Copyright(C) 2014 - 2015 「Cocos Code IDEとLua言語でゲームを作る」逆引き辞典for Lua All rights Reserved.