LoginSignup
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-09-15

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")

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4