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ファイルを修正します。
cc.Director:getInstance():getOpenGLView():setDesignResolutionSize(320, 480, 0) -- 縦画面用に(480, 320, 0)から(320, 480, 0)に変更
--gameScene:playBgMusic() --使わないのでコメントアウト
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")