Cocos Creator tutorial feedback

I am developing a step-by-step tutorial and game for Cocos Creator. The result will be a step-by-step tutorial and a complete Dr. Mario style game at the end. I will be adding some videos to demonstrate steps if they get to difficult to write about.

I will start updating this site every few days with progress: http://slackmoehrle.github.io/en/

Feedback is appreciated.

10 Likes

That is exciting! yay!
It would be great if you include best practices and optimization tips , and features information that are n’t too obvious.

As I come across them, I sure will. This is a learning experience for me too. Documenting each and every step makes me see things I wouldn’t think to write about if I was just highlighting the major steps.

Stay tuned for a big update on this tutorial tomorrow. I made some great progress today.

Looks very promising. Will it be step by step with coding too I assume? Would you cover topics like multiple resolutions/platforms (as an example let’s say iPhone X)?

Looking really good - this is exactly the sort of thing I need!
I can’t wait for more, and I’ll try to work through it when I have some time (probably over Xmas!)

Awesome. Thanks.

Introduction page

  • misspelling: “prototpyed”
  • bad link: “You can download the complete game” (link on “game”) goes to: http://cocos2d-x.org/docs/ (where there is no hint of how to download the game, complete or otherwise)
  • nothing happens when you click “Have Feedback?” (noted on other pages too)

Getting started page

  • misspelling: “Javscript”

note: subpages - inconsistent capitalisation of “c++”

C++ developers page

  • not sure if I should follow the advice to install Cocos Creator or let Visual Studio install it. Visual Studio is probably a popular enough IDE to mention why/why not in guide like this
  • feel the recommendations around text editors seem a bit out of place here, especially with no mention of IDEs, it’s likely to cause some confusion (on the other side of things the phrase text editor might encourage one to try coding with Windows Notepad…)

Starting development page

  • misspelling: “reeplicating”

Dr. Mario (Dr. Mario Introduction in the left pane) page

  • suggest renaming the page to something more appropriate like perhaps something like “Game mechanics summary”
  • 1st screenshot is watermarked (bottom right corner) niether image has attribution, and they differ in aspect ratio and effect (the first has something like hq3x applied, while the latter looks to have artifical dot crawl from CRT emulation)
  • “When there are 3 pills that match the germ color, the germ gets destroyed and disppears from the bottle.” - please consider revising this and perhaps making it into multiple bullet points, as written it sounds like it applies to whole pills (not pill halves if I recall the game correctly) and has no hint of placement/adjacency (if I recall the halves of matching color need to be in a vertical line, perhaps horizontal counted too?)

Designing the game (Designing this game in the left pane) page

  • not sure the sprite illustration’s boxes clarifies what should be a sprite
  • misspellings “trribute”, “demonmstrates” & “it’s”

Artwork page

  • “We can use colored Node objects to act as Layers” - this is the first mention of Node objects or layers in the guide, and it’s not clear what the meaning is (does the game need “layers”? If so, why is this not described in the design page? Is the intention just to group sprites or limit collision or apply effects - remember “layers” used without qualification could mean many different things)
  • I like the KISS approach to the graphics, but suggest adding a note about being sensitive to colour blindness when colour is the only way to differentiate elements)
  • “We can also use a simple colored square to represent the pills.” again this should be pill “halves”
  • not sure what the table is trying to show, nor what the “x” and “y” represent (I do get the “R”, B", “Y” & “G” headings correspond to colours, but feel the full name or even the colour should be used, and the order should be the same as in the previous illustrations) I feel if you haven’t grasped what the text is trying to suggest this table will not help you (I feel it wants to show the difference between the “permutations” and “combinations”)
  • “Code, code, code-er.” - huh?

Creating a new Cocos Creator project page

  • misspellings “anr”
  • “Next, let’s tackle a starting our project.” clumsy wording?

Creating a menu screen page

  • “games title” should be “game’s title”
  • are we starting with the menu for more for tutorial convenience (to introduce simpler concepts first)? I thought menus were typically added later in the dev cycle (not least so early in development you can get to testing/debugging gameplay quicker) - maybe clarify this as otherwise beginners might try to always start at the menu in future games just because it was recommended here

Creating a scene page

  • “out game” should be “our game”, “text music” should be “text, music”, “operating systems shortcut key” should be "operating system’s shortcut key
  • “As previously mentioned this Scene will have…” I don’t think that was mentioned previously
  • “Double click on the MainScene to open it.” do I need to press enter before this step?

UI housekeeping. page (full stop in this title?)

  • “Let’s stick with the 960 x 640 design resolution… swap the width and height with each other.” is there a button/widget to swap these, because I feel I’m getting mixed messages on whether I should change the values manually (nitpic)
  • bullet points beneath “Setting the design resolution” subheading seem out of place and the resulting indenting doesn’t look great
  • “out game” should be “our game”
  • “Sprites are of course going to be used in out game” - “of course”? this assumes a familarity with what sprites are that seems above what this tutorial otherwise expects (what a sprite is or what they are used to achieve isn’t explained earlier in enough depth to expect this) from the passing mention earlier in the design of the gameplay screen (which we’ve taken a detour from) there’s no previous hint that we’ll need sprites in our menu’s UI
  • bullet points below “Adding Sprites” are also numbered (both with “1”) suggest removing the numbering
  • “Drag and drop from your file system into the Assets panel” - drag and drop what? guessing image files?
  • screenshot for “drag and drop…” shows the coloured square and circle assests the tutorial hasn’t gotten to yet
  • though steps are given for adding a sprite here, there is no suggestion of what file(?) to actually add here (for the game) if I am actually following along and trying every step myself hoping to get a completed Dr. Mario-style game at the end…

Setting a colored background page

  • “It is important to note that Cocos Creator informs us of the newly created Node objects parent” why is this important to note?
  • “Create Render Nodes” should be “Create Renderer Nodes”, “objects parent” should be “object’s parent”
  • “and how much space it will occupy on the Canvas” - do we need an need explanation of what is meant by “canvas” here (or earlier in the tutorial) ?
  • “Also, the position should be set to 0, 0 so the node starts at the bottom left corner of the canvas.” Isn’t 0,0 is the centre rather than the corner of the canvas? 0,0 as the position is setting the centre of the Node to the centre position of the canvas (0,0) I think

Adding a game title page

  • Node Tree illustration does not show the sprite/s we were told to add in the previous “UI Housekeeping.” page
  • “properites” is misspelt
  • consider using numbered items instead of bulleted items where they begin “First”, “Second”, “Third”
  • “This should include… etc.” - etcetera doesn’t make much sense here (specifying specific properties from the set of all properties that someone should try tweaking)

Adding a few graphics / Adding Sprites page

  • Says “we will be using the Sprite node from the Node Library panel” but then advises to “Just drag and drop from the Assets panel on to the Background node” with no further mention of the Sprite node from the Node Library panel?!
  • I don’t think someone following this tutorial has those assets at this point?!

Creating a play buton page

  • “buton” mispelling in page title
  • "Both are find " should be “both are fine”?
  • another use of bullets with “First”, “Second”, etc. text, and “etc.” on a list of a specific subset of properties
  • “change some properites for the button. This should include … I stuck with the default properties for the purpose of this demo” mixed messages - you are telling me to change these things but if I want my final result to match yours then I shouldn’t? (some people will want to reprodcte the final result you make exactly, consider suggesting they can change properties at this step rather than telling them they should but that you didn’t)

Thanks. I will push a new PR with a lot of this fixed after I go through your feedback. Thanks again.

I created this: https://github.com/cocos-creator/Tutorial-Dr.Mario-Style-Game/issues/4

Feel free to report issues here!!

What happened to this tutorial? Are you still updating it?

Yup, I am still working on it. I can push the latest version out. I am at the point where I am doing game play stuff.