ラベルを使う基本(Cocos Code IDE, Lua言語)

  • 4
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Cocos Code IDEを使ってLua言語でラベルを使う基本をまとめました。

実行環境、IDE Cocos2d-xバージョン 言語
Cocos Code IDE Mac OS X 1.0.0-RC2 Cocos2d-x V3.2 Lua言語

サンプルコード

プロジェクトを新規作成で作成します。(FileメニューのNew->Cocos Lua Project...から作成できます。)
プロジェクト名は適当につけてください。画面は縦画面(portrait)を指定します。

main.luaファイルを修正します。

main.lua/26行目
cc.Director:getInstance():getOpenGLView():setDesignResolutionSize(320, 480, 0) -- 縦画面用に(480, 320, 0)から(320, 480, 0)に変更
main.lua/31行目
--gameScene:playBgMusic() --使わないのでコメントアウト

GameScene.luaを書き換えます。

GameScene.lua
require "Cocos2d"
require "Cocos2dConstants"

local GameScene = class("GameScene",function()
    return cc.Scene:create()
end)

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

return GameScene

画面中央に「Hello World !」の文字が表示されたと思います。

システムフォントを使う

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)

以下はテキスト揃えに使用できる定数です。

水平方向

  • 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(下揃え)

フォントファイルから作成

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

以下のサイトからダウンロードできます。
http://itouhiro.hatenablog.com/entry/20130602/font
使用の際、ライセンスはダウンロード先で必ず確認してください。

ここでの例では、resディレクトリにPixelMplus12-Regular.ttfフォントファイルを追加して使っています。

-- ラベルのサイズを指定しない場合
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)

テキストの内容を変える

label:setString("hello")

文字色を変える

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

文字を装飾する

createWithTTFで作成したラベルは装飾が可能です。

label:enableGlow(cc.c4b(0, 0, 255, 255)) -- グロー (注意:下記参照)
label:enableOutline(cc.c4b(0, 0, 255, 255), 2) -- 縁取り 赤 幅2
label:enableShadow() -- 影

グローと縁取りはいっしょには使えないみたいです。
影の色や位置の変更方法がわかりませんでした。

ビットマップフォントを使う

準備として、ビットマップフォントを作成しておきます。
ShoeBoxなどのソフトで作成することができます。

ShoeBoxはこちらからダウンロードできます。
http://renderhjs.net/shoebox/

ここでの例は、bmfont.fntとbmfont.pngをresディレクトリにコピーして使っています。

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