Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
1. October 2013

 

This game engine came to my attention yesterday on reddit so I took a bit of time to check it out and it has potential.

 

First off, it also has a few problems.  The installer has absolutely no feedback to say that it installed, no UI, nothing.  It left me scratching my head about what was going wrong and in the end everything was working fine behind the scenes.  It all ended up being moot though, as I never got the evaluation key I applied for anyway, so I was never able to run the local executables anyway.  This is all those teething growing pain issues and no doubt will be resolved in time.  My money says my email provider simply rejected their email… it happens.  Fortunately we can still get a pretty good look as the IDE runs in the browser as well and their is a demo on their site.

 

Speaking of which, here it is:

image

 

You can run the editor in demo mode by clicking here.  Unfortunately you can’t actually create projects this way, but it will give you an idea what SpellJS can do.  Otherwise you need a key.  There are a couple options here, free, not free and slightly more expensive.  Or more specifically:

 

image

 

 

So basically its free for non-commercial use, or 99 euro per developer if you want to make money selling your game directly.  If on the other hand you want to make money via advertising and/or make use of the analytic or cloud features it’s 239 euro per developer.  All told, fairly reasonable pricing in my opinion, but they will face the same trouble all other engine companies face…  a lot of their competition is free.

 

Then there is the matter of what platforms are supported:

image

 

That’s most of the major platforms covered with Flash support as a fallback for the non-compliant browsers out there.  The HTML5 layer is built over WebGL with fallback to Canvas/CSS3 rendering for non-compliant browsers.  The Android and iOS publishing is as native applications, not as web apps by the way, which is good as the iOS browser performance is often abysmal while Android is a mixed bag.

 

Ok, back to SpellJS…  the layout is pretty straight forward.

 

Games are laid out in terms of Scenes.  On the left hand side you’ve got the scene graph:

image

 

Right click on a scene and select Render Scene and it appears in the Scene view:

image

 

Here you can this scene in your game.  There are buttons across the top for pausing the scene and switching in and out of development mode.  Unfortunately they didn’t seem to work for me, I am not sure if this is a side effect of the editor.  SpellJS is supposed to support live editing, allowing you to change your game as you play it.

 

Across the right hand side is a context sensitive area depending on what you have otherwise selected.  This for example is what happens if you select the physics component in Update:

image

 

While if you have an entity selected, such as the HighScore, you will see:

image

 

This is where you would configure your various entities by setting the properties of attached components, or by adding new components.  Much like Unity, you can attach a series of components to your entities and multiple entities to your scene.

 

So, where the heck does code go?  That is the realm of scripts.  On the left hand panel, select Library:

image

 

And you will see the various assets that make up your game, such as graphics sounds and… scripts.

image

 

Here for example is the script showFinish showing in the in IDE editor:

image

 

The editor supports code folding, syntax highlighting but unfortunately doesn't seem to support code completion.

 

Scripts arent your only option, if you look the various systems that compose the update group, if you right click demo_asteroids.system.shoot and select show for example, the code that composes the system will be shown in the editor.

image

 

image

 

On other big question is… how is the documentation?  Quite good actually.  There is a Getting Started guide, a half a dozen tutorials and a fairly comprehensive, if a little sparse, reference guide.  One annoyance is, each click opens in a new tab, leading to tons of tabs to be closed.

 

image

 

All told, this looks like a very polished product and if you like working in JavaScript is certainly worth checking out.  Should my product key ever arrive and my calendar opens up a bit, I will take a closer look.  You can check them out at SpellJs.com.

Programming


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


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List