Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


8. 六月 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:

 

image

 

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:

 

appFiles:['MyFirstApp.js']

to

appFiles:['MySecondApp.js']

Now open up main.js and change:

 

var myApp = new cocos2dApp(MyFirstAppScene);

 

to

 

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.

jet

 

Now lets fill in the code for MySecondApp.js

 

var MySecondApp = cc.Layer.extend(
{
    init:function()
    {
        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));
        layer1.addChild(jetSprite);
        jetSprite.setPosition(new cc.Point(0.0,0.0));

        this.addChild(layer1);
        return true;
    }
});


MySecondAppScene = cc.Scene.extend({
    onEnter:function(){
        this._super();
        var layer = new MySecondApp();
        layer.init();
        this.addChild(layer);
    }
})

 

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!

image

 

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:

 

2D_Cartesian_Coordinates

 

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:

jetpivot

 

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:

jetSprite.setAnchorPoint(cc.PointMake(0,1));

 

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.

 init:function()
    {
        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));
        layer1.addChild(jetSprite);

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

        this.addChild(layer1);
        return true;
    }

 

And finally, our end results:

image

 

Again, you can download the entire project here.

 

 

Read Tutorial 4

Programming , ,

blog comments powered by Disqus

Month List

Popular Comments

Godot Engine 2.1.2 released
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


23. January 2017

 

A few days ago (sorry, computer issues on this end), Godot 2.1.2 was released.  Primarily a maintenance release while Godot 3.0 continues development, there is actually a fair bit packed into this particular release.  The biggest feature in this release is IP v6 support, a recent requirement to get published on the Apple Store.  Features of this release include:

HIGHLIGHTS

This release is quite important for Apple developers, as it brings IPv6 in the networking API, which is now a requirement for applications on the Apple Store. It also fixes a regression from 2.1.1 in the OSX binaries, which had unwillingly set the minimum required OSX version too high.

Another major change is that a bug was fixed in the initialization of most audio drivers which caused an audio latency of about ~200 ms, quite annoying for games which need a precise timing for samples.

  • Networking: IPv6 support and many bug fixes and enhancements
  • Audio: Fix ~200 ms audio latency bug due to misinitialization of some drivers
  • GDScript: Ternary operator (a if cond else b)
  • 2D: Easy API for 2D split screen (with demo)
  • OSX: Fix minimum supported version when compiling with recent Xcode, now 10.9 (regression in 2.1.1)
  • Dozens of bug fixes
  • Many class reference documentation updates
  • Editor translation updates

OTHER NOTABLE CHANGES

The full list of changes is of course lengthier, as it contains 112 commits made since 2.1.1-stable (excluding merge commits). Here's a selection of some of the most interesting ones for end users:

  • Linux/X11: Fix crash when neither ALSA nor Pulse are installed
  • Web: Fixes and improvements for WebAssembly/asm.js
  • Editor: Fix Script Editor drawing over dialogs
  • Editor: Ability to change visibility when ancestor node is hidden (with proper visual feedback)
  • Editor: Add bucket fill preview in TileMap
  • Editor: Add favorites and recent history to create dialog
  • GDScript: Named colors in the Color API
  • 2D: Fix Particle2D initial size randomness property having no effect
  • 2D: Add the finished signal to AnimatedSprite
  • 2D: Add Node2D's set_global_rot, set_global_rotd, set_global_scale and corresponding getters
  • GUI: Make deselect work for TreeItem in SELECT_SINGLE mode and emit item_selected
  • GUI: PopupMenu upgrade: Hide on item selection
  • GUI: Flat button and and styleboxes for ButtonArray
  • Libraries: Embedded library updates: libpng 1.6.28, zlib 1.2.11, opus 1.3 and opusfile 0.8, webp 0.5.2

 

You can read more details on the Godot blog.  The new release is available for download here.  Of course, if you are new to Godot and want to learn it, be sure to check out our complete tutorial series available here.

GameDev News

blog comments powered by Disqus

Month List

Popular Comments