Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
18. March 2016

 

Goo Create, an HTML5 WebGL game engine with a full editor, just released a new version.

 

New in this release:

  • New particle system component
  • Visual behavior editor
  • Synchronous behavior state transitions
  • Improved action dialog with search
  • Collapsible panels
  • 65K vertex meshes no longer split

Plus several other fixes and improvements:

Improvements

  • The current selection is added to the URL and restored if the page is refreshed.
  • Shadows now work on mobile devices.
  • New entities are now added as children of the currently selected entity. If no entity is selected, new entities become children of the scene.
  • Added a checkbox to the Sound Component panel to specify whether sounds should automatically be played when the scene is played.
  • Added a checkbox to the Sound Component panel to make sounds 2D (not using 3D spatial effects).
  • Added a “Mute” button to the default publishing templates. Clicking it will mute all the sounds in the scene.
  • Added an option for focusing the canvas element in published scenes. When embedding a scene into another website you usually don’t want the canvas to be focused automatically.
  • Added the possibility of specifying alpha values in the color picker control/component. To make use of this new control for script parameters just make a parameter of type “vec4”, and control “color.”
  • Added the possibility of loading Ads immediately after it is loaded or after the whole page is loaded. This option is available in the “Serve Ad” app.
  • Better-looking HTML component default content.
  • The scene title is displayed as the page title and, consequently, shows up in the browser tab.
  • Mesh back-faces now render with correct normals.

Bug fixes

  • Fixed the Tween Opacity actions, QuadComponent and gizmos so that they use TransparencyBlending instead of CustomBlending.
  • Fixed texture repeating so that it works with NPOT textures.
  • Fixed the OrbitCam panning so that it works on touch devices.
  • Removed the restriction of the light shadow casting size and range being integers.
  • Fixed the ButtonScript and PickAndExit action so that they use the “touchend” event to open links, in order to support iOS9.
  • Fix a bug that caused tooltips to say visible after starting to drag a sortable item (e.g. scripts or behavior actions).
  • Made sure the “allowfullscreen” attribute is added to the “Embed code” for published scenes.
  • Added missing ctx.playTime to the autocompletion in the script editor.
  • Fixed a bug that caused the names displayed in the scene Hierarchy would to not overflow properly in Firefox.
  • Made the the text editor search box larger because text would sometimes get clipped in Firefox.
  • Fix a bug in the publishing template that prevented the bottom bar from being hidden unless the “Maximize Button” option was enabled.
  • Fixed a bug which caused the timeline keyframe easing function to not be saved sometimes.

You can read more about the new release here.

GameDev News


17. February 2016

 

Coppercube 5.4, a full WYSWYG editor experience for HTML5 game development, just released version 5.4 as a free updated.

From the release notes:

This is a free update for all existing users, download it here. New in this update:

  • Heightmap import support for terrain
    If you want to sculpt your 3D world terrain with another software, you can do this now, too. Coppercube now is able to import terrain heightmaps of the formats .raw, .r16, .r32, .png, .tga and .pgm. It also has the option to automatically apply textures to imported terrain and distribute grass onto it.
    heightmap terrain import
  • Integrated Texture Packer
    CopperCube now has an integrated texture packer. This is useful if you are using 3D models (for example downloaded from the web) which weren't optimized for games. Most of 3D models available online have lots of textures applied to them, which slows down your game while rendering. You can now simply right-click such a model in your game, and select "Modify -> Pack all textures of selection into one". This will optimize your 3d model and make it render much faster.
    integrated texture packer
  • Much smaller, compressed files for WebGL
    CopperCube now generates up to -80% smaller files for WebGL (depending on content). Files are now compressed, causing WebGL websites to download and start much quicker. This feature is optional and can be turned off in the publishing settings.
    webgl compression
  • Much smoother first person shooter style camera
    The first person shooter camera now has a new property named 'movement smoothing', which when turned on causes the movement of the player to be much softer, even on very slow systems. This is nice especially for mobile apps and the WebGL target, but movement also on the Windows and Mac OS X apps feels now much more natural, when turned on.
    smoother fps camera
  • Full web page WebGL support
    There is now an option in the publishing settings to enable your game/app to use the full web page size.
  • Footstep sounds
    It is now possible to play foot step sounds easily. Simply attach the 'footsteps' behavior to any object, and once it is moving, one random of three actions is run, after a specific foot step length. Use those actions to play sounds, blow up dust, or similar. The footstep behavior is available as free downloadable extension behavior from the extension download page here.
  • Box testing for "On proximity do something" action
    The "On proximity do something" action now has a setting named 'testArea'. Set this to 'box' instead of the default 'sphere', and your objects will be tested against a box, which is more exact and useful in a lot of cases. Also, the box is rotated and scaled with the object, so you can also test for non-orthogonal areas now.
    integrated texture packer
  • Nicer 2D image drawing
    You can now specify if a 2D image drawn as part of a 2D Overlay will be drawn 'sharp/pixelated' or 'blurry/filtered' when it is scaled. Both options make sense, depending on the type and use case of your 2D overlay. Now you can choose manually which option will be used.
    integrated texture packer
  • New "Recalculate normals" command
    The command for recalculating tangents and binormals, which is intended to be used for normal mapped geometry only now also works for all kinds of static geometry. It has also been renamed accordingly "Recalculate normals and tangents...". You can use it to recalculate and fix normals for all kinds of static meshes now.
  • Possibility to update static Phyics geometry
    The new scripting function ccbUpdatePhysicsGeometry() is able to update the internal collision geometry of the physics engine. If you move a part of the static collision geometry while your game is running, and want the physics engine to respect that, simply run this new command afterwards. You can do this for example with a 'Execute JavaScript' action.
  • Pan support for Model Viewer Camera
    If you are using the model viewer camera behavior, you can now enable pan for it. This works when pressing both mouse buttons at the same time. It is implemented inm the downloadable extension behavior 'Model Viewer Camera Extended' from the extension download page here.
  • Improved .OBJ file loader
    The .obj file importer is now more compilant and can even import corrupt .obj files found on the web. It is also now able to import files correctly, exported with some newer version of a more popular 3d modelling software, which seems to add some unexpected characters into the file sometimes.
  • Increased WebGL performance
    WebGL performance is now much better, on all browsers: Internally, the engine now uses requestAnimationFrame() if this turns out to perform better on the target browser.
  • other, smaller new features:
    • Updated documentation with examples and more details
    • Improved french translation
    • Extension scripts in WebGL now also can handle right mouse button events
    • A handfull of smaller bug fixes.

GameDev News


17. February 2016

 

Phaser, the cross platform HTML5 based game library I covered in this tutorial series, just released version 2.4.5. 

image

From the release:

Phaser 2.4.5 is our first release in 2016 and represents several months of fixes and optimizations. As a point release it's a safe update from a previous 2.4 build, but as always please test first before upgrading, and be sure to skim through the extensive change log. There are some great new features including Dolby Digital sound support, loads of updates to Pixi and a new Webpack bundle.

  • 14 new features including Dolby Digital audio support and advanced Text wrapping
  • 30 updates including replacing PolyK with EarCut, Tilemap updates and lots of TypeScript and JSDoc updates.
  • 31 bug fixes including OS X Chrome right-click issues, Sprite mouse over, Tween event order, Loader queue fixes and more.
  • 10 updates to our build of Pixi including CanvasPool tweaks, fixing generateTexture bounds calculations and Filter Texture and GL Viewport fixes.

Due to on-going development of Lazer (previously known as Phaser 3) Phaser is soon to enter the LTS (long-term support) stage of its life. This is when we impose a feature freeze, locking the API down and responding only to bugs. This is a necessary step to allow us to focus on Lazer while still ensuring Phaser is given the support it deserves. Thousands of developers use Phaser and we've no intention of ignoring that. However with the release of 2.4.5 we will now be moderating issues opened on GitHub to this effect.

You can read more here.

GameDev News


13. February 2016

 

Welcome back to the ongoing Superpowers game engine tutorial series.  In the first part we got Superpowers installed and created our first project, in the second tutorial we look at Actors and Components, the “stuff that makes up your game world”.  Then we did a tutorial on Sprites and Animations give our “stuff” a little bit more visible panache.  In this tutorial we are going to add a Behavior to our component, which is the way you give your “stuff” a bit of logic.  Basically this is how you program your Superpowers game.

 

Just like adding a sprite was a two step process, first we added the image to the scene as an asset, then we created a new component on our actor, scripts work the same way.  Let’s start by creating a new script.  In the left hand window, click the + icon and select Script:

image

This will create a new script and automatically open it in Superpower’s integrated code editor.  Oh, by the way, Superpowers has an integrated code editor!  And it’s actually pretty good, with auto completion, code formatting and more.

image

Now double click your Scene or switch to the Scene tab in the editor and select your Sprite.  In my case I have an animated sprite with a single animation called “Walk” defined, but the Animation set to (None).  See the previous tutorial for more details on this process.  Now let’s add another component to our action, a Behavior.  Following the same process as adding the Sprite Renderer, simply click New Component and select Behavior:

image

There is only one setting in Behavior, the name of the class to add.  Drop down the Class dropdown and choose ScriptBehavior.

image

 

Now we can actually do a bit of coding for this Actor.  I will present the code upfront, and we will go through it after.  Coding in Superpowers by default is using the TypeScript programming language, which is an open source language created by Microsoft to solve some of JavaScripts, shall we say... rough spots.  I’m actually rather a fan of TypeScript myself.  Anyways... here is the code I created:

class ScriptBehavior extends Sup.Behavior {
  awake() {
   
  }

  update() {
    
    if(Sup.Input.isKeyDown("UP")){
      this.actor.move(0,0.1,0);
      if(this.actor.spriteRenderer.getAnimation() !== "Walk"){
        this.actor.spriteRenderer.setAnimation("Walk");
        Sup.log("Set animation to walk");
      }
    }
    if(Sup.Input.isKeyDown("DOWN")){
      this.actor.move(0,-0.1,0);
      if(this.actor.spriteRenderer.getAnimation() !== "Walk"){
        this.actor.spriteRenderer.setAnimation("Walk");
        Sup.log("Set animation to walk");
      }
      
    }
  }
}
Sup.registerBehavior(ScriptBehavior);

 

Our class ScriptBehavior (perhaps we should have named it something a bit less lazy, like CodeThatMovesMySpriteOnKeypress ...) inherits from Sup.Behavior.  You will notice all Superpowers code is in the Sup namespace to prevent name collisions.  The Sup.Behavior class can be thought of as a scriptable component.  It has a number of methods that can be called as part of the program’s lifecycle, in this example we implement awake() and update(), although there are a few more available, such as start() and onDestroy().  awake is called when the behavior is attached to an actor and can basicially be thought of like a constructor, where you do one time setup and initialization logic.  update() on the other hand is called every frame, or every iteration of the game loop, and this is where you implement the logic of your behavior.

 

In this particular example we simple check for keyboard presses using the Sup.Input global object, testing if a key with the value “UP” or “DOWN” is pressed.  If it is, we move slightly up or down in the Y axis.  You can notice in this example that a Behavior can access the Actor it is attached to using the actor property.  Additionally you can see you can access components attached to the actor in a similar way, like we did with the Sprite Renderer via .spriteRenderer.  Finally just to illustrate that it can be done, we log the animation change using Sup.log().  Finally the script is registered with a call to Sup.registerBehavior().

Programming


9. February 2016

 

In the first tutorial we looked at installing Superpowers, running the server and creating our first project.  In the next tutorial we got to know the editor, the relationship of Actors and Components and finally created a camera for our game.  In this tutorial we are going to draw a sprite on screen, then a sprite sheet which will enable animation.  So without further ado, let’s jump in.

 

There is one more important part of the relationships in Superpowers to understand.  As we’ve seen already, our Scene is composed of Actors, which in turn are made up of Components.  Components however can have Assets.  Assets on the other hand are NOT part of the Scene.  They actually exist at the same level as the Scene and can be used in multiple scenes.  Assets are declared on the left hand side of the interface.

 

Adding a Sprite to Your Game

On the left hand side of the screen click the page with a plus sign icon (the same we used to create the scene):

image

In the resulting dialog, select Sprite:

image

The sprite options will now be available in the inspection window on the right hand side of the screen.  In that window, select Upload and navigate to the image file you are going to use for your game.  We sure to use a web friendly format such as JPG or PNG.  Then set the grid size to the same dimensions as the Texture Size, like so:

image

 

You could also modify the pivot point of the sprite by changing the origin position.  The default of 50% will put the pivot point in the middle of the sprite, so this is the point the sprite will be drawn and transformed relative to.  You can also configure the opacity, how the sprite is rendered, etc.  The Grid Size parameter is used when you have multiple sprites in a single texture, which we will use later.

 

Adding a Sprite Component

Now that we have a sprite asset available in our game, let’s add one to our scene.  First on the left hand side, or using one of the tabs across the top of the editor, select your Scene.  Next create a new Actor, just like we covered in the previous tutorial, name it sprite or something similar.  Finally click the New Component button and select Sprite Renderer, then click Create:

image

Now there should be a SpriteRender component available.  From the Asset window on the left side of your screen, drag the sprite you added to the Sprite field of the Sprite Renderer in the Inspector, like so:

GIF

 

Tada, we’ve added a Sprite to our game world and it should now show up in the View in the center of your screen:

image

The sprite can be positioned using the transform widget, or directly in the Transform component on the right.

 

Running Your Game

Now that we’ve got a camera and something on screen, let’s take a moment to actually run our game.  There is a small amount of configuration we need to do.  On the left hand side of the screen, locate the “Settings” link, click away!:

image

 

In the resulting form, select your scene as the starting scene(via drag and drop):

image

 

We have one final task to perform.  Our Camera and our Sprite are both at the same Z location, meaning that at least initially, nothing will be in the view of the camera.  You have one of two options, you can either position all of your sprites at a –z location, or you can move your camera to z=1.  The later is the easier option, so I will go that route.  Select your camera actor, it’s transform component and set the Z value to 1:

image

 

Now we press either Play or Debug in the top left menu.  The debug option will load Chrome with the developer tools enabled, making it possible to detect errors in your code.  The Play option will run it in the Superpowers player.  Either way, we should see:

image

Congratulations on your first successful game!

 

Using a Spritesheet

Now let’s take a look at how we can used multiple sprites in a single texture, often known as a spritesheet.  I’m using this simple 3x1 sprite sheet:

sheet

 

Add it as an asset like we did earlier.  This time however, after we upload the image, we want to configure the grid size using this button:

image

 

When prompted enter the number of rows (1) and columns (3) in your image, or simply enter the width and height of each frame of animation in the text boxes.  Now lets create a new animation named walked.  Simply click the New button under animation, name it walk.  Then in the settings we set (I believe, the UI does not make it obvious), the first frame of the animation, the length and the number of frames to step by.  I also set the animation speed to 3 frames/sec meaning our 3 frames on animation will play once per second.

image

 

And the end result:

GIF

Ignore the twitch, that’s just me capturing the animated gif at the wrong end point.

 

Next Part

Programming


GFS On YouTube

See More Tutorials on DevGa.me!

Month List