Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
28. September 2013

image

There are a new set of coordinated releases to the Cocos2d-x family of game development libraries and tools.  The changes include:

 

CocosStudio

  • UI editor for UI graphic artists
  • Animation editor for graphic artists
  • Data editor for game data designers
  • Scene editor for game designers

 

 

Cocos2d-html5

  • Improved Sprite, Node, LabelTTF class, now it is clean and clear
  • Added a new sample game Fruit Attack which works great on PC browsers, mobile browsers, and can even be run natively as an android and iOS app with JSB
  • Replaced cc.Sprite and its subclasses's texture from DOM element to cc.Texture2D on Canvas mode,
  • Improved cc.Texture2d. Now you don't need to wait for loading resources when creating a new scene or layers. Textures will pop up when they are loaded
  • Improved the update function of Actions. Now Action objects use less temporary objects, making it better for GC performance.
  • Improved LabelTTF rendering pipeline. Now it caches the result which is 100% faster on mobile browser
  • Fixed API compatibility between Cocos2d-html5 and JSB: cc.ParticleSystemQuad has merged intocc.ParticleSystem. For more info, please read Upgrade guide v2.1.5 to v2.2
  • Added Auto Hiding url address bar for mobile browsers. Please refer to the template and the Hello World for examples
  • Added frame event, collider and blend type supporting for Armature. Now Armature supports 2 tools: 1.CocoStudio, 2.DragonBones
  • Set auto render mode $Default value$ to canvas for mobile browsers and WebGL for desktop browsers

 

Cocos2d-x

  • Initial version of Windows8 and WinPhone8 port
  • Supported the first stable version of CocoStudio v1.0.0.0
  • Added CocoStudio GUI
  • Almost no differnce between JSB and cocos2d-html5 v2.2
  • Lua binding supports CCTableView and CCScrollView

 

 

The Cocos2d-html5 project also released a new sample game, Fruit Attack:

FruitAttackGame

 

You can play it in your browser here.

 

You can read the official announcement here.  Or head on over here to download.

News


11. September 2013

 

Now we are going to export our texture so we can edit it in an external image editor.

 

First in the image editor, make sure Mode is set to View.  ( We changed it to paint in the last section ).

 

In UV Window, Select Image-> Save As Image

image

 

Pick a filename and location and then click Save As Image:

image

 

Now we can export the UV layout to help us with the painting.

 

In 3D View, switch to edit mode and select All ( A ).

In the UV window select the UV menu, then Export UV Layout:

image

 

Once again, pick a directory and location for the saved image file.  I personally went with ReferenceImages5UVLayout.png.

 

Now load your exported texture file in your image editor of choice.  You have the option of registering a program that will be opened by Blender automatically if you prefer, then you can simply select Image->Edit Externally.  For now we will simply open it manually.

 

In this case I am going to use the GIMP as the editor.  The GIMP is a freely available 2D graphics package.

 

Here is our texture loaded in GIMP. 

image

 

Now let’s load the UV Layout.  In the GIMP select File->Open As Layers

image

 

Select the file you saved the UV layout to.  Now it should appear like so in GIMP:

image

 

Now we draw the additional texture details on our texture.  Just be certain you have the right layer selected when you edit:

 

image

 

Drawing textures is an art in and of itself that I can’t cover here.  Frankly, I am not very good at it either.  Now I add some graphical details to the image and end up with something like this:

 

Untitled 3 2 (6)

 

… yeah, I’m no artist!  Don’t worry though, in sprite sheet form it will look just fine.  Just make sure when you export the image from your image editor, the reference layer ( the wireframe ) isn’t visible.

 

Once you are done editing your texture, assuming you didn’t change the location or filename, in the UV/Image Editor window, simply select Image->Reload Image or press Alt + R.  If you did change the file name, instead select Image->Replace.  Keep in mind you also have to change the texture name in the Texture panel if you renamed it.

 

image

 

As a 3D model though, it could certainly use a bit of work.  It’s a matter of adding more details to the texture, as well as implementing normal maps to give it some depth, something we will hopefully talk about later.  You can also greatly improve rendering with various texturing modes ( specular, bump, etc ) which only will work within Blender.  ( Wont work when exported to a game engine ).  This is also something we will hopefully talk about in more detail later.  Texturing adds a hell of a lot to your models quality, so it’s certainly a skill you should take some time to develop ( unlike me! Smile )

 

image

 

 

Tips

Often you will find yourself working in the UV Window and wanting to figure out just what @#[email protected]$#ing Polygons you are working on.  Fortunately there is an easy way to do this.  In the UV window, make sure you are in View ( as opposed to Paint ) mode.  Then click the Keep UV and edit mode mesh selection in sync icon:

image

 

Now you can select stuff in the UV window:

image

And in the 3D View, the corresponding items will be selected.

image

 

 

Another thing you might have noticed is how incredibly annoying the layout is to paint on.  The UVs are set how Blender thinks they fit best, not necisarrily how you think they should be arranged to paint on.  You can however move the UVs however you want.  Unfortunately every single time you Unwrap again, the UV layout changes you have made will be reset.

 

Say for example we want to paint our cockpit in it’s natural direction.  We could then move the cockpit UVs into a position that is more appropriate to painting ( using G(rab), R(otate) and S(cale) like normal 3D editing ).  Like I’ve done here by moving them to the right and rotating 90 degrees:

image

 

This will be a great deal easier to paint.  Unfortunately if we go to 3D View and choose Unwrap:

image

 

Well, that’s annoying!  Fortunately there is a solution.  If you want to have a custom UV layout, you need to “Pin” them in place.  Then when the model is Unwrapped again, Blender knows where to put it.

 

Select the outermost two vertices and press P to pin them in place.  The selected value will turn red(ish) when selected, like so:

image

 

Now the next time you Unwrap the texture, these UVs will be pinned in place.  Of course, you could just select and Pin all vertices in place, but you are greatly handicapping Blender’s ability to deal with UV map changes.  Keep in mind too that adding a Seam will automatically cause an Unwrap. 

 

Final tip.  Notice the ugly line across the tail of the plane?

image

What causes this?  It’s the texture seem.  Basically make sure the edges of your textures where you cut a seam have a matching seamless colouring on both sides, or you will end up with an ugly artefact like this.  A few seconds with a Blur brush would solve this problem.

 

The astute eyed may also notice that the text is mirrored on the mirrored half of the model:

image

 

This is a side effect of using the mirrored modifier.  You’ve got a few options here.  1 – apply the modifier, to form a single mesh and texture each side manually ( nah! ).  2- Switch to a symmetric number like 808  3- live with it.  I’ve chosen 3.

 

Next up we will look at animation.


Click here for the Next Part

 

Art


9. September 2013

 

First, let me start by saying this step is completely optional!  Blender has integrated texture painting functionality, but if you prefer to work entirely in a 2D application like GIMP or Photoshop, that is completely your option.  That said, Blender’s painting abilities are pretty solid and are a great way to block in colours rapidly. 

 

You enter Texture Painting mode the same way you enter Object or Edit mode, in 3D view.  Just pull down the mode dropdown and select Texture Paint.

image

 

Once in Texture Paint mode, hit T to open up the Tools panel.

 

Clicking the Brush icon allows you to select between the various brushes:

image

 

While the controls right below the brush allow you to select the active color, set the brush strength, radius and blending mode ( as in colour blending ):

image

 

 

There is a ton more functionality in there, such as painting with a texture pattern, changing brush stroke styles, etc… but we will just be using the painting tools to block in our basic colours.  Most jets have a grey on grey camouflage colour and that’s what we are going to go with here. 

 

Let’s start with our base color, from the colour picker, select a light grey colour.  Then set the radius to a large value and keep strength at 1 ( full ).  Like so:

image

 

Now you should see a very large circle over the cursor in 3D View.  This represents the radius of the brush.  Left clicking will paint with the current brush:

image

 

Now, let’s look at something rather cool.  As you paint in the 3D View, it will automatically update in the UV window:

image

 

Even cooler, you can paint in the UV window and it will update in the 3D view.  To paint in 2D in the UV window, simply click the Mode dropdown at the bottom of the UV/Image Editor window and select Paint.

image

 

Now you can paint in the UV window!  Keep in mind though, colour and brush selections are still done from the Tools panel of the 3D view.

 

Now I am just going to paint the entire Jet in our light grey colour.  Keep in mind you will have to rotate and zoom the camera around to get in every nook and cranny while painting.  Fortunately you can easily see from the UV windows if you missed a spot.  You of course could just paint in the 2D layer, but then you don’t get nice crisp edges in the texture map.

 

Here is the fully painted jet:

image

 

Next I simply vary the grey-ness of the brush and randomly layer colours to get a gray on gray camo pattern.  I then pick a slightly darker gray and colour in the cockpit area.

 

image

 

That’s it for painting in Blender.  Next up we will finish the details of our texture in an external 2D graphics package.


Click here for the Next Part

 

Art


1. September 2013

 

One of the oldest and most popular articles on my site is I want to be a game developer… now what?  It offers a collection of advice for new game developers.  I keep intending to update it but frankly, not enough changed.  The following was recently posted on GameDev.net:

 

https://www.gamefromscratch.com/post/2011/08/04/I-want-to-be-a-game-developer.aspx
This article was written 2 years ago, and is very informative about each game development language, but 2 years sounds like too much for how events quickly change now, XNA is partially dead, more books released, etc..

Is there a newer article of that kind of information? and is C++ still a bad choice (with the introduction of SFML 2.1 and SDL 2)?

 

Which got me to thinking about what all has changed since I wrote that guide.  The following was my answer.  Of course, I have no idea how many thousands of things I forgot to mention.  All told, the world hasn’t changed all that much, languages don’t really move all that fast.

 

Truth is, I keep meaning to update it, then look at the state of the game development world and there hasn't really been enough changes.  I will be doing a v2 eventually, but in summary, here is what's changed since the article was written:

C++

-----------------------------------------------------------------------------

SFML 2/2.1 released.  Frankly it's not all that different.

SDL 2 was released.  Again, not massive changes.

Gameplay3D engine released  Site Link My Look

Hands down the biggest change to C++ ( and over the last two years ) was the release of C++11.  This completely changes the C++ book recommendations.  C++ changes a lot about the language, especially how it should be taught.  Some books did a horrid job updating to the new standard ( just bolting on the new features ), while others did a better (less lazy) job.  I will probably do a post specifically about C++11 books at some point in the future.

C#

-------------------------------------------------------------------------

XNA was put out to pasture by Microsoft.  Fortunately, Monogame also got a lot better.  XNA is still an option, just not as good of one as it used to be.

PlayStation Mobile was released and C# based.  SDK Link (My Tutorials)

Unity 3D is now free.

Mono for iOS and Android 100$ cheaper

C# 5 released.  Outside of parallel programming functionality (async), not much changed.  Nowhere near the change of C++ for example.

Java

-------------------------------------------------------------------------

Slick2D is dead or abandoned.

Java took a few hits in terms of deployment due to security concerns ( Apple yanked it for example ).

LibGDX is probably the strongest option in Java now.

Don't believe there were any major language updates ( 1.7 then and now ), just service releases.

Python

-------------------------------------------------------------------------

Um.... anything?

Otherwise there would be a few things I would mention that weren't as relevant 2 years ago.

Misc

---------------------------------------------------------------------

Rise of the Lua game engines.  Add Dreemchest to that list as well.

In the mobile space, Lua just simply put got big.  Lua is also the scripting engine of choice for CryEngine, Gameplay and Project Anarchy.  Lua is a very very very good starting point for people looking to just start out.  Corona is now available free and at the same time, is more expensive...

HTML5 got a little bit more viable ( but still limited ) Flash suffered some major blows ( but still viable ).  There are now a number of solutions that make appifying HTML5 applications possible, such as CocoonJS.  Tons of libraries exist for HTML5 game development..

Previously niche/limited game maker software ( GameMaker, Construct2 ), as well as cross platform tools like Haxe (tutorial series) or LoomScript ( my look ) have made cross platform game development a hell of a lot easier.

The 3D engine space saw a bit more activity.  As mentioned earlier, RIM released GamePlay3D.  On top of that Torque was released for free, CryEngine leaked it's developer information in a hack attempt... ( thanks for that btw... :( ) and Project Anarchy (my look) was announced and released.  Project Anarchy is a bundle of Havok's game developer technology released completely free for mobile development.  On the 3D game engine space the story is Unity Unity and Unity.  Frankly Unity had a good year, made partnerships with pretty much every single platform available and is available in a free version for pretty much every platform now.

Grand total, not all that much happened, not really enough to full write a v2 version, hands down the biggest changes in the last two years:

C++ 11

XNA killed

Unity took over the world.

I miss anything?

 

Anything else I missed in the last two years of game development?

Programming


27. August 2013

 

YoYoGames have released update 1.2 for their popular GameMaker cross platform 2D game engine, which was used to make such titles as Hotline Miami and gamemakerlogoHome.  Included in this update is one pretty bold claim…  New YoYo compiler runs projects up to 100x fasterI!  That’s a pretty big claim, and I have to say… if you’ve got room for a hundred fold improvement in speed… you had some pretty serious issues before hand!

 

 

Anyways, here is more information from the release:

 

 

  • New YoYo Compiler Runs Projects Up to 100x Faster
  • New Shader Support Allows Creation and Cross-Platform Publishing of Shaders

 

YoYo Games today announces the general availability of GameMaker: Studio version 1.2. With today’s update, developers will be able to harness the full speed of the CPU with the new YoYo Compiler, allowing projects to run up to 100x faster across all native platforms supported. Fully-integrated, totally cross platform Shader support allows developers to write shaders once and then deploy them across all platforms that support them.

 

"Today’s update raises the bar in the visual quality and the complexity of games that can be made in GameMaker: Studio,” said Russell Kay, chief technology officer at YoYo Games. “Our goal with today’s update and all future enhancements to GameMaker: Studio is that the imagination be the limiting factor in the game development process, not the technology.”

The YoYo Compiler

The YoYo Compiler unlocks new possibilities in CPU-intensive areas such as artificial intelligence, procedural techniques, real time lighting, enhanced physics, real time geometry deformation, collision and data manipulation, immensely raising the quality bar. The YoYo Compiler is free for customers of GameMaker: Studio Master Collection and is otherwise available as an add-on priced at $299.

Cross Platform Shader Support

Fully integrated, totally cross platform shader support allows full access to low level shaders, while still letting GameMaker: Studio do the heavy lifting. The built-in editor has been extended to have full color syntax highlighting and “intellisense” for shaders, making creation a breeze.

 

The rapid adoption of GameMaker: Studio as the preferred 2D games development framework has exceeded YoYo Games’ expectations. Today, GameMaker: Studio has been downloaded more than one million times and is quickly approaching 20,000 daily active users. To learn more about the GameMaker: Studio family of products and to get GameMaker: Studio version 1.2, please visit www.yoyogames.com.

 

Certainly an important release for GameMaker developers.

News


GFS On YouTube

See More Tutorials on DevGa.me!

Month List