How the GUI system works; Things I didn’t know about Cocos2d-x, but I probably could have read in the docs somewhere #9

This one’s mostly for my own benefit because I’ve struggled with it a few times.

You’ve got the Layout, which comes in the HorizontalLinear/VerticalLinear and Relative Layout. The first two are just shoved in, and dealt with concretely (I’ll have to learn more, but it seems like setPosition(10, 10) moves it 10, 10 from where it should be in line). Relative positioning means that the widget’ll be placed 10, 10 away from whichever widget it was set by setRelativeToWidgetName; if that doesn’t work, you’ll need to use setAlign with something like ui::RelativeAlign::PARENT_TOP_CENTER_HORIZONTAL to set its position to the top center of its parent. You’ll note that there’s two names to a widget, it’s Node::_name and the (presumably) Widget::_relativeName, so you’ll want to be sure you’re using the relative name (as set by setRelativeName) when you’re placing things relatively.

So then once your Widget is in roughly the same place, you’ll want to add a LayoutParameter. These parameters have a Gravity (which again I don’t understand yet) and a Margin, which is the space between the widget and its parent. This doesn’t work recursively, so if you add it to the parent Panel, all its children are not going to have a margin in relation to each other. In order to do that you’ll need to add the parameter with the margin to each of the children. Like all things in cocos, it makes sense if you think about it, just not at first.

Anyway hope this was at least partway helpful.

Updating a Sprite, in place; Things I didn’t know about Cocos2d-x, but I probably could have read in the docs somewhere #8

You can update a Sprite’s SpriteFrame, instead of only its texture. This is important because if you are using a SpriteFrame to batch load sprites and then try to swap one sprite out for another using setTexture, nothing will happen because its the same texture, only the textureRect is any different. So your first instinct is to manually force the new textureRect:

old_sprite->setTextureRect(new_sprite->getTextureRect(), new_sprite->isTextureRectRotated(), new_sprite->getTextureRect().size);

but really, all you need to do is reuse the sprite frame:


Much easier.

Eleven months of work, for four downloads.

I want to talk about the development of my latest game, to talk about the time you need to put into it, to talk about its failure and why I shouldn’t be surprised that it did.

I’ll just start off by saying that I realize that I should not have expected more, and I didn’t really, but there was always the hope in the back of my mind that the game would be an immediate success, despite being my first completed game.

How it started

I started working on Beat up the face! in November 2014. I had initially set out to make a game in under a month, because the last game I had made took two years, and although I’ve had some good Let’s Plays done, there was still a lot of work to be done. I wanted something I could put out quickly and maybe even get some recognition for, asBioch was fun, but it was too hard to get into and doesn’t get more niche than roguelikes.


Final game, mid fight

Continue reading

Scaling a Sprite to match a font size; Things I didn’t know about Cocos2d-x, but I probably could have read in the docs somewhere #7

Here’s how you scale the back sprite to match the front sprite’s size, accounting for scaling.

Size front_size = front_sprite->getContentSize();
float front_x = front_sprite->getScaleX();
float front_y = front_sprite->getScaleY();
Size back_size = back_sprite->getContentSize();

How to resize a Button; Things I didn’t know about Cocos2d-x, but I probably could have read in the docs somewhere #6

You can only resize the Buttons around the size of its text using the content size of the inner Label, which is called the _titleRenderer. Here’s a working lambda you can shove into your game. I suggest enabling Scale9.

    auto resize_btn = [](ui::Button* button) {
        auto lbl_size = button->getTitleRenderer()->getContentSize();

                lbl_size.width * 1.1f,
                lbl_size.height * 1.1f