How to achieve as shown in the image

cocos2d-x C++
#1

Hi,

Plz see the image:

General template of above card is, a blue circle, text and orange sprite(It’s sprite, not simply a rectangle in actual case). Here, I an create a sprite with orange image and add blue circle and text as children.

But, as can be seen, there can be different between height of different cards. And using setScale(1, y) is not helping because blue circle and text are added a child, so they get distored when I used setScale on Y of parent.

Currently, to achieve this, I am not treating orange sprite as parent but all 3 as individual nodes.

Is, there a way where I can still use orange sprite as parent?
I want this since it will simplify my work for adding animation(runAction) to each card.

Thanks :slight_smile:

Rich Text or Label for text-wrapping & how to calculate Height?
ScrollView auto resize height?
#2

IF you scaled a parent orange sprite by 200% for example then you could also scale its text and circle children by 50% (1.0/scale of orange sprite). Would that work?

#3

I"m sure there are cleverer ways, but could you not just remove the children, scale the parent, add the children?

A simple method should be possible to be written to do this - something like…

create a node (or some collection )
move all children from this to the node (or collection)
scale this
move all children from the node (or collection) to this…

#4

Do not use scale. Use a 9slice for the background, top left align circle and center align text. Resize with setContentSize().

You can create resizeTo and resizeBy actions.

#5

Lol… this is a nice hack which is why I don’t wanted to use if there are other possible solution. :stuck_out_tongue:

It’s same thing… whether I scale parent before or after doesn’t matter. Anyways, in my case, I’m already scaling parent as soon as I’ve created it. So, what you suggested didn’t work :stuck_out_tongue: :smiley:

This is what I roughly did…(I hope you’re talking about this only!)

Sprite -> created parent
scaled Y Parent by 1.5 times
Create a circle (which is sprite)
Create a label
Add both circle and label to parent.

Thanks… I’ll try this. I’m currently doing scaleY on parent but instead I also tried setContentSize for parent where I increased Y by 1.5 times but it didn’t work.
Let me check if it works if I had used Scale9Sprite instead of Sprite :slight_smile:

#6

@almax27
But I wonder why it didn’t work by setting content size for normal Sprite but only for scale9Sprite.

#7

There’s probably some historical reason, but I agree that expected behaviour would be for it to resize the geometry and stretch the texture like Scale9Slice does. Or at least assert/log why it is not supported.

#8

May be @slackmoehrle can help. :slight_smile:

#9

You could use the UI widgets and things like this are easier to implement. Layout (w/orange back color) and ImageView (circle) + Text (label w/widget layout support) should give you what you want.

Otherwise @almax27’s advice is good.

Ricardo’s also done some very recent work on Sprite to include the Scale9Sprite capabilities to support CocosCreator projects. You may want to take a look.

1 Like
#10

It would be better to create new CardNode and add background, circle and label as children. You can override setContentSize of this node and adjust background scale here. You still will be able to run actions on this node to animate the whole card.

1 Like