TDDLib (cocos2d-x 3) updated: Improved UI

My TDD Testing framework for cocos2d-x 3.0 is updated.

Changes:
- Modified UI
- Filter test without the need to touch the "Find" button
- Add Background colour setting (help to check coloured elements)

Source: https://github.com/tklee1975/tddlib_cocos2dx3

Fixing undesired outline of Label in cocos2d-x 3.0

Recently, when I work on my TDDLib project, I found that the Label of cocos2d-x 3.0 show the Label with an undesired outline which isn't I want to (The first label shown below).

After several google search, I found the solution to fix it (The second label shown above).

It's simple, just call the blend of the Label to BlendFunc::ALPHA_PREMULTIPLIED.

Code: label->setBlendFunc(BlendFunc::ALPHA_PREMULTIPLIED

Source example:

std::string sysFont = "GillSans";

std::string test1 = "No BlendFunc";

std::string test2 = "ALPHA_PREMULTIPLIED";

Label *label;

Color3B textColor = Color3B(200, 245, 245);

// First Label (Undesired outline)

label = Label::createWithSystemFont(test1, sysFont, 40);

label->setColor(textColor);

label->setPosition(Point(250, 300));

addChild(label);

// Second Label (Fixed outline)

label = Label::createWithSystemFont(test2, sysFont, 40);

label->setColor(textColor);

label->setPosition(Point(250, 200));

label->setBlendFunc(BlendFunc::ALPHA_PREMULTIPLIED);

addChild(label);

Using AutoResize in iOS App Development

When programming the UI of an application, we are inevitable to program an UI with dynamic width and height;

Real Example:
A view contain a footer and content with different text length, some cause 1 lines, so cause 2 lines;

Dynamic Layout in iOS

There are several ways to handle this kind dynamic layout in iOS programming, one of my favourite is using "Auto Resize Mask", it help to adjust the size of the subview and help the subviews sticking to the four borders;

Autoresizing mask constants

Mask related to the auto size
- UIViewAutoresizingFlexibleHeight
- UIViewAutoresizingFlexibleWidth

Mask related to auto positioning
- UIViewAutoresizingFlexibleLeftMargin
- UIViewAutoresizingFlexibleRightMargin
- UIViewAutoresizingFlexibleBottomMargin
- UIViewAutoresizingFlexibleTopMargin

Also see: Diagram about the mask

Note: We don't need type those mask value, usually we work with the interface builder

Tips of using AutoResize

1. Use with Interface Builder, you can preview the appearance on how it works.
2. Uncheck the "AutoLayout" of your XIB in interface builder.
3. Don't modify the size and position on views which are well "autosized", just modify the superview size.

Deal with Autoresize bugs

• Find out which layout component are resize as you expect and double check the autoresize setting.
• Check the adjusted size in the layoutSubview method.
• Can use NSStringFromCGRect to convert the view.frame to String which is easy to print out.

Reference

* Adjusting the Size and Position of Views at Runtime (Apple Doc)