Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

24. February 2012



I appreciate that you gave away your software for free and some of it has real potential, but the volume of spam is getting way too high. 




These are some of the emails I have received from DAZ since signing up earlier this month, this doesn’t include my receipts/serial number emails, nor the half dozen or so I deleted outright.  Even worse, the opt-out link results in:







Bit of advice if anyone from Daz is listening… dial the volume back and make opting out a one click process ( that works! ). General rule of business; don’t piss off your customers!


You have now been marked as junk by me and I imagine I am not alone.  Keep this up and all of your emails will be flagged as junk by default, completely ruining what you are trying to accomplish.  What about the rest of you that signed up for the free Daz/Bryce/Hexagon bundle, are you getting sick of the spam?


24. February 2012



CryTek’s freely available CryEngine has just had an update released.





Easily the biggest new feature is integration of Autodesk Scaleform, a Flash based UI solution, that was also recently integrated in the competing  Unity engine.  In addition to Scaleform support, they announced to following new features:



In addition to offering Scaleform technology, the Free SDK update will also feature several DirectX 9 rendering improvements, providing POM (Parallax Occlusion Mapping), SSDO (Screen-space Directional Occlusion), Particle GI (Global Illumination) and a new “Very High” graphics configuration to support these new features and offer higher levels of rendering quality.


The CryENGINE team has also been working to provide fixes for the most prominent issues holding up the community. CryENGINE 3 Free SDK 3.3.9 includes improved SLI/CF support, improved 32-bit driver support, support for 5.1/7.1 surround sound systems and many improvements to CryENGINE 3 Sandbox.


You can download it here.


17. February 2012


You may have read my review of Photoshop Touch for Android earlier.  If not, basicallyAdobe-Photoshop-Touch1 Photoshop Touch had all the makings of a very affordable while very capable Photoshop alternative for tablet owners.  That said, it was hobbled to the point of near uselessness by a couple really bad design decisions.



I happy happy to say, those mistakes have been rectified.  I have added a section to my review which covers the changes that have happened post release, which you can read here.



To put it simply, if you have an Android tablet, and are looking for an affordable and streamlined version of the Photoshop + Wacom tablet experience on a budget, you owe it to yourself to check out Photoshop Touch.  Could be the best 10 bucks you’ve ever spent, well say 20 bucks, once you toss in a stylus

16. February 2012


Blender 2.62 was released today.  The 2.6 series of releases is all about adding in the variousbl branches that have been in development recently and this one is no exception.  Key new features include:


  • UV Tools, a number of new features have been added including an interactive stitch tool, sub-division surface aware UV unwrapping and a sculpting tool for selecting and tweaking UVs
  • Boolean library now using “Carve” library which should be faster, more stable with better overall results.  To the end user, other then improved results, there should be little difference to the existing interface
  • Cycles render engine ( render via GPU ) has had a number of new features including render layers/passes, multiGPU rendering and more
  • Object tracking support has been added
  • Remesh modifier, creates a new topology based on an input surface.  If I am honest, I’m not really sure what purpose you would use it for
  • Many bug fixes and other new features


For full details, you can go here with the bug fixes listed here.  To download the newest release head on over here. Have some patience though, as always with every new release days, their servers are getting hammered.



The next release (in April) is the one I am really waiting for, as it’s the one that finally adds BMesh support!  There is also a new team focusing on improving COLLADA support.  The future is looking extremely good!


Nice work Blender team, keep ‘em coming!

Art, News

14. February 2012


Released in Beta back in December, Unity 3.5 is now out of beta!  This release is a pretty epic one to boot.  New features include:

  • Flash export.  Compile your game to SWF format
  • Google Native client targeting ( Chrome C++ )
  • Path finding built in
  • A new particle system, editable in Edit Mode, group-able, modular with a built in curve editor
  • Built in LoD support
  • Asset cache server
  • Multithreaded rendering ( PC, Mac, 360 only )
  • HDR support
  • Directional light maps
  • Select and edit multiple items in Inspector
  • Webcam texture ( huh? )
  • Microphone support on all platforms
  • iOS improvements including iAd, Compass, Gyro, Camera, Microphone and push notification support
  • Android improvements include Mouse/Joystick support, Camera, Microphone, Gyro/Compass, Android 3.2 ( Honeycomb ) and Android 4.0 ( Ice Cream Sandwich ) support



And much much more.  The full list of changes is available here.


Month List

Popular Comments

Cocos2D HTML Tutorial 3: Sprites , positioning and coordinate systems.
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

8. June 2012


This tutorial is going to look at the basics of sprites and an area that initially confuses many people ( myself included! ), the positioning system used by Cocos2D.  I am going to build off the code we wrote in Tutorial 2, with a few minor changes.  First thing you need to do is make a copy of the MyFirstApp folder and paste it as the aptly named MySecondApp, so you end up with a folder looking like this:




Now we need to make a few changes. First, you can delete the file MyFirstApp.js within the MySecondApp directory as we are going to create a new one now.  Create another js file, MySecondApp.js.  We will worry about the contents in a few minutes.


First we need to make a couple small alterations to our existing code.  Open up Cocos2d.js and scroll to the very bottom.  We want to change:





Now open up main.js and change:


var myApp = new cocos2dApp(MyFirstAppScene);




var myApp = new cocos2dApp(MySecondAppScene);


That is all the changes we need to make to our boilerplate code.  In future tutorials, I will just assume you have already performed this step.


Finally before we get to coding, we need a sprite to work.  In your newly created folder, create a directory named images and save an image file there.  I am using this sprite, which has the file name Jet.png.  You of course can use whatever sprite you want.



Now lets fill in the code for MySecondApp.js


var MySecondApp = cc.Layer.extend(
        var layer1 = cc.LayerColor.create(
            new cc.Color4B(128, 128, 128, 255), 600, 600),
            jetSprite = cc.Sprite.create("./images/Jet.png");

        layer1.setPosition(new cc.Point(0.0,0.0));
        jetSprite.setPosition(new cc.Point(0.0,0.0));

        return true;

MySecondAppScene = cc.Scene.extend({
        var layer = new MySecondApp();


Much of this code should look virtually identical to MyFirstApp.js, as not much has changed.  Obviously our variable name has changed, but onEnter() is otherwise identical.


In our init() function, we are simply creating a background layer that is a solid gray color with the dimensions of 600x600 ( the same as our Canvas tag ).  We then create a cc.Sprite object using our Jet.png.  This is all that is involved in loading and creating a sprite object.  Now it's just a matter of adding the sprite to our layer, and adding our layer to MySecondApp’s layer. 


Lets load up our new app in the web browser and see what’s what!



As you can see, we have a 600x600 solid layer of gray and if you look closely in the bottom corner of our screen, you can see 1/4 of our jet sprite.  Depending on your background, this result might seem remarkably odd, as there are two factors at play here.


First, as I said in a previous tutorial, Cocos2D puts the origin at the bottom left hand corner, not the more traditional top left.  So if you have ever worked with textures or bitmap graphics before ( outside of OpenGL ), this is going to seem a little backwards to you.


Why would they do it this way?  I am guessing that  they followed the OpenGL way of doing things.  Now, why would OpenGL buck the trend and set the origin to the bottom left?  Well that involves a trip back to high school math and Cartesian coordinates.  If you think in those terms, suddenly starting from the bottom left makes a bit more sense.  Remember this graph:




In this particular case, if you are dealing with positive coordinates, you are in the upper right hand quadrant.  So if something is at say, position (2,2), it is above and to the right of the origin.


In the end it doesn’t really matter why, just be aware that the positions in Cocos2D start at the bottom left and you will be fine.


The next factor here is, where is the sprite’s anchor point.  Its all nice and good to say our jet is at (0,0)… but what part of our Jet is at (0,0)?  This is where the anchor point comes into effect.  The anchor point is where sprite translations ( rotating, translating, etc ) are performed relative to.  In Cocos2D, by default the pivot point is in the middle of the sprite, like illustrated by the red dot:



It is traditional to place the anchor point at the top left corner, but there are some real advantages to placing it at the center.  The least of which is rotation.  Consider the effects of rotating a sprite 1 degree per frame.


Here is the result with the pivot about the center:

(The code for the above animation is available here )



And here is the same image with the sprite anchor point moved to the top left:


(The code for the above animation is available here )



If you want to alter the anchor point, you can do it with this code:



The parameter to setAnchorPoint() is the new origin, in OpenGL coordinates.  0,0 == Bottom left, 0,1 == Top left, 1,0 == Top right, 1,1 == Bottom right.  Truth of the matter is, you should just adjust to the Cocos way of doing things unless you have a very good reason.


Alright… back to example, doing things the Cocos2D way.


Let say for example we wanted our sprite to be at the top right hand corner, we would accomplish this with the following code:

var size = cc.Director.sharedDirector().getWinSize(); jetSprite.setPosition(new cc.Point( size.width - jetSprite.getContentSizeInPixels().width/2, size.height - jetSprite.getContentSizeInPixels().height/2) );


Now here is the updated init() method with the Jet sprite centered to the screen.

        var layer1 = cc.LayerColor.create(
            new cc.Color4B(128, 128, 128, 255), 600, 600),
            jetSprite = cc.Sprite.create("./images/Jet.png");

        layer1.setPosition(new cc.Point(0.0,0.0));

        var size = cc.Director.getInstance().getWinSize();
        jetSprite.setPosition(new cc.Point(size.width/2,size.height/2));

        return true;


And finally, our end results:



Again, you can download the entire project here.



Read Tutorial 4

Programming , ,

blog comments powered by Disqus

Month List

Popular Comments