Chapter 6: UI Feedback requested

cocos2d-x
#1

Hi,

I’d like to get feedback on Chapter 6 of the Programmers Guide: http://slackmoehrle.github.io/6/

  1. I’m struggling as to what to do for screen shots. I don’t feel like I can create them all in the same look and feel. Perhaps this is OK since we have sample source code to go along with the chapter?

  2. When I read this chapter out loud I feel like something is missing. How does it flow to you?

  3. Are there other widgets that are important to cover? I know we have more but I didn’t want to clutter the chapter with widgets that you guys don’t use. If we get asked about other widgets I can add them.

I’m finalizing the sample code to go along with the chapter at this time.

Tomorrow I will post a draft of chapter 7 for feedback.

#2
#3

For the TextField section, you should provide a screenshot of how it looks like when it is clicked and hhow it appears on the screen, both in landscape as well as portrait. Also, it doesn’t provide information on how to customize the TextField, like max number of characters, all caps, etc.

#4

Looks good.

I would like to see the sprite sheet versions for the menu (MenuImageSprite) and the UI create methods. For e.g:

auto btn = Button::create("normal_image.png", "selected_image.png", "disable_image.png", ui::Widget::TextureResType::PLIST);
#5

Thanks guys. I’ll eval and add these.

#6

I am having a problem with loading bars (but I think the problem is caused from cocos studio 2.1 beta).
So i thought “hey, the UI Chapter is online” and looked in the guide.
Sadly you aren’t talking about the size of the widgets/loading bar. ( http://github.com/darkdukey/Cocos-Studio/issues/39 )
You are also not saying how the actual state of a loading bar is set (setPercent if I am right ^^). I think that should be added.

#7

Thanks Michael, I will add this too and post a new draft.

1 Like
#8

ok, I’m posting another draft: http://slackmoehrle.github.io/6/

I will re-read this again tomorrow and now focus on finalizing chapter 7.

#9

I check this out in beginner’s point of view

  1. Do you try to mention what kinds of UI components provided? or how to build UI in game?
  2. Where can I add a picture in UI?
  3. How do you position the UI components? Say I need to create a menu selection screen like Angry Bird
  4. What is TextureResType::PLIST?
#10

@winipcfg - Thanks for the feedback. I will look at these items to get them added.

#11

The bit about dot matrix printers? I’d say drop it; people reading this will know about sprites - so just saying that a label sues a sprite as each letter I think would be less confusing (to me, at least!)

When talking about TTFConfig, one of the best uses I can see of this is when developing and you’re not sure what font to use - set up the config & you only need to change it in one place if you find a better font to use.

I think a screenshot of each type of control would be useful - maybe a label of each type, and again with each of the three effects on it. then one each of the different controls - maybe two variations with different styles?

The important thing a screenshot would be giving to me would be a definite idea of what each thing was. I kind of know what a label is - but a TTF label can be very different! And what about a menu? I really don’t know what a cocos menu looks like! So, just a simple screenshot of each would suffice, I think.

#12

I think the idea is to tell the users that each character can be controlled like a sprite, i.e.: Fade, Scale, Jump, etc.

#13

Thanks @Maxxx

The issue I’m having with screenshots is that I might chose a certain way of representing these controls and another user will come along and wonder why the controls in the guide look different. But that is where the sample code comes in. Perhaps I should add at the end of the chapter that there is sample code and the location to get it.

The TTFConfig piece I like, I will add it.

#14

and the fact that a bitmap font and a true type font are different and the system constructs them differently.

#15

Yes - I see your point - you’ll end up getting lots of questions asking why my control looks different to the one in the manual!!

Maybe with the link to the sample code, a screenshot of it running would ‘pretty it up’ without confusing users?

And, I’ve said it before, but I’m going to say it again, thank you SO MUCH for doing this; it is making a genuine difference for the community.

#16

I think the thought of “how the control looks” can be easily solved when somewhere is stated, that you can change the look through images which you use for certain parts… Or you can also write somthing like “Don’t worry if your widgets look different from these widgets in the screenshots. The look and feel can be customized to fit your needs. For example the next screenshot shows the same widget but it uses this image(link). That’s all the magic.”

Everyone who tries to work with a engine and learns for example C++ should understand this simple principle.

#17