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

转载 于 2015-01-21 15:51:36 发布 · 853 阅读 · 1

本文详细介绍了使用 Quick-Cocos2d-x 引擎进行2D游戏开发时的各种游戏元素，包括图片、按钮、滚动条、精灵动画及粒子效果等，并提供了丰富的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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


UIImage

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

icocos_01_image.png


ScaleUIImage

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


icocos_01_scale.png


Scale9UIImage

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

icocos_01_scale9.png


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)

icocos_01_ttflabel.png


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)

icocos_01_atlaslabel.png


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)

icocos_01_button.png


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)

icocos_01_checkbox.png


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 )

icocos_01_radio.png


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)

icocos_01_hscroll.png


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)

icocos_01_vscroll.png


文件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)


icocos_01_sprite.png


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)

icocos_01_atlassprite.png


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

icocos_01_spritesheet.png


图元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)

icocos_01_rectangle.png


图元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)

icocos_01_polygon.png


图元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)

icocos_01_circle.png



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)

icocos_01_cocostudioarmature.png


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)

icocos_01_dragonbone.png


内置Particle

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


icocos_01_particle.png

音效

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



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

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值