Quick-Cocos2d-x 学习手册（一）：游戏元素

从2D引擎整体角度去看Quick-Cocos2d-x。第一篇是游戏元素，游戏中最多出现的图片、动画声音等元素。游戏开发贯穿始末的东西，必须从这里说起了。

UIImage

1 2 3

cc.ui.UIImage. new ( "40.png" )      :pos(display.cx, display.cy)      :addTo(self)

ScaleUIImage

1 2 3 4

cc.ui.UIImage. new ( "40.png" )      :setLayoutSize(80, 80)      :pos(display.cx, display.cy)      :addTo(self)

Scale9UIImage

1 2 3 4

cc.ui.UIImage. new ( "slice30.png" , {scale9 =  true })      :setLayoutSize(120, 80)      :pos(display.cx, display.cy)      :addTo(self)

TTF文本

1 2 3 4 5 6 7

cc.ui.UILabel. new ({      text =  "这是一行TTF文字" ,      size = 16,      color = display.COLOR_BLACK, })      :pos(display.cx, display.cy)      :addTo(self)

Atlas文本

1 2 3 4 5 6

atlasLabel = CCLabelAtlas:create(      "AtlasLabel" ,  "tuffy_bold_italic-charmap.png" ,       48, 64, string.byte( ' ' ) )      :pos(display.left, display.cy) self:addChild(atlasLabel)

Button

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

btn3_img = {      normal =  "80x40button_n.png" ,      pressed =  "80x40button_h.png" ,      disabled =  "80x40button_dis.png" , }   btn3 = cc.ui.UIPushButton. new (btn3_img)      :setButtonLabel( "normal" , ui.newTTFLabel({          text =  "Button" ,          size = 24,          color = ccc3(255, 255, 255),      }))          :setButtonLabel( "pressed" , ui.newTTFLabel({          text =  "Down" ,          size = 24,          color = ccc3(255, 255, 255),      }))         :setButtonLabel( "disabled" , ui.newTTFLabel({          text =  "Disable" ,          size = 24,          color = ccc3(200, 200, 200),      }))      :pos(display.cx, display.cy)      :addTo(self)

CheckBox

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

btn1_img = {      off =  "30check_off.png" ,      off_pressed =  "30check_off.png" ,      off_disabled =  "30check_off.png" ,      on =  "30check_on.png" ,      on_pressed =  "30check_on.png" ,      on_disabled =  "30check_on.png" , }   btn1 = cc.ui.UICheckBoxButton. new (btn1_img)      :setButtonLabelOffset(0,0)      :setButtonLabelAlignment(display.CENTER)      :setButtonSelected( false )   -- 初始按下状态      :onButtonStateChanged(function(event)print( "CheckBox点击" )end)      :pos(display.cx, display.cy)      :addTo(self)

Radio Group

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

RADIO_BUTTON_IMAGES = {      off =  "30radio_off.png" ,      off_pressed =  "30radio_off.png" ,      off_disabled =  "30radio_dis.png" ,      on =  "30radio_on.png" ,      on_pressed =  "30radio_on.png" ,      on_disabled =  "30radio_dis.png" , }   local group = cc.ui.UICheckBoxButtonGroup. new (display.TOP_TO_BOTTOM)      :addButton(cc.ui.UICheckBoxButton. new (RADIO_BUTTON_IMAGES)      :setButtonLabel(cc.ui.UILabel. new ({text =  "option 1" , color =     display.COLOR_BLACK}))      :setButtonLabelOffset(20, 0)      :align(display.LEFT_CENTER))      :addButton(cc.ui.UICheckBoxButton. new (RADIO_BUTTON_IMAGES)      :setButtonLabel(cc.ui.UILabel. new ({text =  "option 2" , color =     display.COLOR_BLACK}))      :setButtonLabelOffset(20, 0)      :align(display.LEFT_CENTER))      :addButton(cc.ui.UICheckBoxButton. new (RADIO_BUTTON_IMAGES)      :setButtonLabel(cc.ui.UILabel. new ({text =  "option 3" , color =     display.COLOR_BLACK}))      :setButtonLabelOffset(20, 0)      :align(display.LEFT_CENTER))      :addButton(cc.ui.UICheckBoxButton. new (RADIO_BUTTON_IMAGES)      :setButtonLabel(cc.ui.UILabel. new ({text =  "option 4 disabled" , color =     display.COLOR_BLACK}))      :setButtonEnabled( false )      :setButtonLabelOffset(20, 0)      :align(display.LEFT_CENTER))      :setButtonsLayoutMargin(0, 0, 0, 0)      :onButtonSelectChanged(function(event)          printf ( "Option %d selected, Option %d unselected" , event.selected, event.last)          end)      :pos(display.cx, display.cy)      :addTo(self) group:getButtonAtIndex(4):setButtonSelected( true )

HScroll

1 2 3 4 5 6 7 8 9 10 11 12 13

SLIDER_IMAGES = {      bar =  "120x30hscrollbar.png" ,      button =  "60x30hscrollhandle.png" , }   cc.ui.UISlider. new (display.LEFT_TO_RIGHT, SLIDER_IMAGES, {scale9 =  true })      :onSliderValueChanged(function(event)            printf (string.format( "value = %0.2f" , event.value))      end)      :setSliderSize(200, 30)      :setSliderValue(75)      :pos(display.cx, display.cy)      :addTo(self)

VScroll

1 2 3 4 5 6 7 8 9 10 11 12 13

SLIDER_IMAGES2 = {      bar =  "30x120vscrollbar.png" ,      button =  "30x60vscrollhandle.png" , }   cc.ui.UISlider. new (display.TOP_TO_BOTTOM, SLIDER_IMAGES2, {scale9 =  true })      :onSliderValueChanged(function(event)          printf (string.format( "value = %0.2f" , event.value))      end)      :setSliderSize(30, 200)      :setSliderValue(75)      :align(display.CENTER, display.cx, display.cy)      :addTo(self)

文件Sprite

1 2 3 4 5

local sprite1 = display.newSprite( "walkBomb.png" ) sprite1:setPosition(display.cx, display.cy) sprite1:setAnchorPoint(0.5, 0.5) sprite1:setScale(1) self:addChild(sprite1)

AtlasSprite

1 2 3 4

display.addSpriteFramesWithFile( "enemy.plist" ,  "enemy.png" ) local spriteAtlas = display.newSprite( "#beeBomb.png" ) spriteAtlas:setPosition(display.cx, display.cy) self:addChild(spriteAtlas)

Sprite Sheet

1 2 3 4 5

local sprite = display.newSprite( "#role01.png" ):pos(display.cx, display.cy) self:addChild(sprite) local frames = display.newFrames( "roled.png" , 1, 10,  true ) local animation = display.newAnimation(frames, 0.3 / 10) sprite:runAction(CCRepeatForever:create(CCAnimate:create(animation)))

图元Rectangle

1 2 3

local red = display.newRect(80, 80, {fill= true , color=ccc4f(255, 0, 0, 0.5)}) red:setPosition(display.cx, display.cy) self:addChild(red)

图元Polygon

1 2 3 4 5

local points = {{0, 0}, {80, 80}, {160, 0},} local polygon = display.newPolygon(points, {fill= true , color=ccc4f(255, 0, 0, 0.5)}) polygon:setClose( true ) polygon:setPosition(display.cx, display.cy) self:addChild(polygon)

图元Circle

1 2 3

local circle = display.newCircle(80, {fill= true , color=ccc4f(255, 0, 0, 0.5)}) circle:setPosition(display.cx, display.cy) self:addChild(circle)

Cocos Studio Armature

1 2 3 4 5 6 7 8

display.addSpriteFramesWithFile( "DemoPlayer/DemoPlayer0.plist" ,  "DemoPlayer/DemoPlayer0.png" ) CCArmatureDataManager:sharedArmatureDataManager():addArmatureFileInfo( "DemoPlayer/DemoPlayer.ExportJson" ) local armature = CCArmature:create( "DemoPlayer" ) armature:getAnimation():playWithIndex(0) armature:setScale(0.2) armature:setAnchorPoint(ccp(0.5, 0.5)) armature:setPosition(ccp(display.cx, display.cy)) self:addChild(armature)

DragonBone

1 2 3 4 5 6 7 8 9 10 11 12 13

local manager = CCArmatureDataManager:sharedArmatureDataManager() manager:addArmatureFileInfo( "Dragon.png" ,  "Dragon.plist" ,  "Dragon.xml" ) local dragon = CCArmature:create( "Dragon" )   self.animationNames = { "stand" ,  "walk" ,  "jump" ,  "fall" } local aniName = self.animationNames[math.random(1,4)]   local animation = dragon:getAnimation() animation:setSpeedScale(24 / 60) -- Flash fps is 24, cocos2d-x is 60 animation:play(aniName) dragon:setPosition(display.cx, display.cy - 200) dragon:setScale(math.random(50, 100) / 100) self:addChild(dragon)

内置Particle

1 2	emitter = CCParticleRain:create() self:addChild(emitter)

音效

1	audio.playSound( "sfx/ConFlipSound.mp3" )

来源网址：http://www.lolofinil.com/2014/06/26/icocos_01/