Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

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.

News

13. February 2012

 

On the PlayN discussion forum PlayN 1.1 was just announced.  Complete release notes are available here.

 

 

Key new features include:

  • add HTML Canvas backend ( in addition to the WebGL and deprecated DOM HTML5 back ends ) as a fallback for browsers that don’t support WebGL *cough* Internet Explorer *cough*
  • iOS support… probably the biggie of this release
  • removed GAE dependencies ( this was a pain in the butt previously )
  • Android properly supporting mp3
  • various other bug fixes

 

As was mentioned in this earlier post iOS support isn’t complete, yet.

 

 

Good job PlayN team!

News, Programming

13. February 2012

 

 

I have been playing around a bit with Daz 3D Studio since it was recently made freely available. At first I struggled to find an actual use for the program, then I realized how exceptionally easy it made creating animated sprites. The following tutorial will walk through creating the following walk cycle using Daz Studio:



The above image is actually a web animation generated from this spritesheet that we will create. All told, the process will take about 5-10 minutes, most of it will be you waiting for your computer!  If the above image isn’t animating, that means your browser ( most likely Internet Explorer ) doesn’t support the keyframes CSS attribute.  Trust me, it works. Smile

 

 

You are going to need a couple things to follow along this tutorial, all of which are (currently) freely available.

 

You will need:

 

 

 

Install all of these products.  Now we fire up Daz Studio.

 

We are going to use the default human, feel free to drag and drop and design your guy however you want.  That said, do not move the person from the default screen location.

 

Once your guy or gal is dressed/decorated however you want, its time to add some animations.  On the left hand panel, select Content Library, Walks then start-(N) and drag it down to the beginning of the timeline.

 

Like so:

 

imageimage

 

If done correctly, if you press play your character will now have a walk cycle.  You can drag down as many animations as you would like to capture, just add them one after another in the timeline.  In this example we are just going to do the single walk cycle animation.

 

Now comes the key part, you don’t actually want your character to be moving like it does currently, you want him to remain stationary.  First lets frame things into the left.  Click the view selector box to rotate to the left view.

 

image

This is the guy you are looking for, click the red section labeled left.  Now ideally your window should look something like this:

 

image

 

 

Now we need to strip out the movement part from the animation.  To do so, first we need to convert to Studio keyframes.  This is done by right clicking in the blank gray area above the timeline and selecting Bake to Studio Keyframes, like so:

 

image

 

You will get the following message:

 

image

 

Simply click Yes.  Now we can edit out your animation.  What we want to do is remove movement along the Z-axis.  In order to do this, select Parameters along the right hand panel, then you want to select the Hip ( the root of all animations ).  You can do this by either clicking it within the scene Window, or selecting it from this drop down:

 

image

 

 

Now that you have the Hip selected, in the Parameters panel ALT+Left click the zTranslate panel:

image

 

This process should reset it’s value to 0.  Now if you press play on the timeline, your animation should now be stationary.  Now its time to render our images out.  To do so in the menu select Render->Render Settings…  like so:

 

image

 

The following window will appear:

 

image

 

If not already done, make sure at the bottom right it is set to “Show Advanced Settings”.  Now drag the quality/speed slider down to 3 ( or it will take forever, for little visible gain ).  Now you want to scroll the options down a bit.  First we want to set our image render resolution.  I personally went with 128x96, but you can use whatever you want.

 

image

 

 

Now scroll the options down a bit more and select the Render To: drop down.  You want to select Image Series like this:

image

 

 

Now we want to select where to render it to.  Leave Start and End Frame at the defaults ( the entire animation ), file in a name and leave it as PNG so we get transparencies.  Switch the location from Library to Folder and pick a directory you want it to save your renderings to, like so:

image

 

Now click the green “Render” button.  You will get a warning like the following:

image

 

Simply click OK.

 

Now we wait… there is absolutely no indication it’s actually doing anything, but Daz Studio is now rendering your sprites.  The only real indicator it’s doing anything is the spinning “busy” mouse icon.  Let it do it’s thing, it took approximately 4 minutes on my PC.

 

Once it is completed, in Explorer navigate to the directory you told it to render to.  If all went well, your directory should be populated with 51 PNG images.  Here’s mine:

 

image

 

 

Now that we have our sprites, we need to make them into a sprite sheet.  If you haven’t already, install The GIMP and the sprite sheet plugin I linked earlier.  Now load up The Gimp.

 

In GIMP select File->Open As Layers…

image

 

Navigate to the folder you saved your images to, then CTRL+A to select them all ( or CTRL + Click to select them one by one ).  When finished press Open:

image

 

If everything worked correctly, your layers list should look like this:

 

image

 

Now select the Filters Menu->Sprite-Sheet->Create From Layers…  If this menu option doesn’t show up, you haven’t installed the spritesheet plugin correctly.

 

image

 

Gimp will now merge all of the layers together into a single sprite sheet in a new window like so:

 

image

 

 

Simply save this file and you are done.  My end results are this.  You may want to do some editing, like making your spritesheet square instead of one wide and short image, but this can be accomplished in a few minutes of copy and paste.  All told, one remarkably fast way to generate a walk cycle sprite animation.  Rendering other angles or different animations is simply a matter of repeating the process from a different angle or dragging and dropping different animation sets.

 

Of course, you can also create your own animations quite simply in Daz.  You can also import your own meshes and props, although I haven’t really experienced this part yet, so I do not know how painful the process is. 

Art , ,

10. February 2012

 

 

Sculpting is all the rage in 3D these days, and for good reason.  You can quickly and fairly easily make incredibly detailed models in a very intuitive manner.  Many professional studiossculptris_logo have slotted a sculpting application like Autodesk Mudbox or Pixologic ZBrush in their workflows.  Only one catch… got 800$?  In the world of 3D, that’s rather affordable, but in the world of my wallet, that’s a bit more harsh!  Of course Blender, Maya, Max et al. all have sculpting features, but they simply don’t approach the abilities of a dedicated application.  Fortunately for us, there exists a free option, Sculptris.

 

 

 

 

 

image

 

 

Sculptris began life as a hobby project of Tomas Pettersson, in an attempt to make a free version of ZBrush.  Thing is, he did a damned good job, so good in fact that Pixologic hired him on.  Even cooler for all of us, Pixologic made Sculptris on of their official products and continued to offer it for free!

 

So essentially, you can think of Sculptris as ZBrush lite, but don’t go thinking it’s a demo version or a toy, it is a remarkably capable and streamlined application.

 

If you have never used a 3D sculpting app before, its rather like modeling with virtual clay.  With Sculptris you start with either a flat plane or a 3d sphere, then start pushing, pulling, smoothing, creasing away until your model takes shape.  It really is a remarkably fluid way to work.  Tools are kept to a minimum, in Sculptris you model using: Crease, Rotate, Scale, Draw, Flatten, Grab, Inflate, Pinch and Smooth.  That’s it, and frankly, that’s about all you need.

 

Once you are done shaping your 3D model, now it’s a matter of texturing.  You click the Paint button, choose the texture size you want it to create and it goes to work for a few minutes.  Once your texture map is generated, you can now paint in 3D using the same interface.

 

 

Sculptris is Paint mode ( click for larger image )

image

 

 

Performance is good as is feedback.  I have never experienced a crash, although I have experienced some oddity using Sculptris on my laptop in power saving mode ( the buttons are all in the wrong location and the top menu bar disappears ), but then, using Scultpris in power saving mode isn’t particularly a brilliant idea, so I wouldn’t worry too much.

 

You can of course also import your own models, this is especially useful for creating displacement maps for your lower polygon work.  Sculptris supports importing OBJ ( wavefront, format, but nearly ubiquitous at this point )  as well as GoZ format ( ZBrush format ).  You can also export in the same two file formats.  Be careful though, your exported files aren’t going to be “light”.  Consider the model in the screenshot, it was imported as a 200K OBJ, and after a few minutes in Sculptris when it was exported  it was 14MB in size.

Cool Thing of the Week, Art

Month List

Popular Comments

JavaScript Toddler Game Part 1: Hosting a cocos2D app in Node.js
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


13. July 2012

 

This is the first part of my adventure creating a simple game for my daughter

 

One of the catches with a JavaScript game, as you saw from this earlier tutorial, to take full advantage you need a client and a server.  However, once you want the server to start doing “stuff”, you want as much control over it as possible.  The advice “write your own!” is normally remarkably stupid, but with Node, it actually isn’t!  In fact, you can create a fully functioning server in only a couple lines of code.  If you are looking for a way to deploy an advanced JavaScript application, read on.

 

If you’ve never experienced Node before, basically it is a server side implementation of Google’s V8 Javascript engine, and a whole TON of plugins to do just about everything.  Perhaps the biggest selling point is, it allows you to work in both Javascript on the client and server.  It is also easy to deploy, massively asynchronous, scalable and frankly, kinda cool.  The first thing you are going to need to do is install it on your computer.  The install process is remarkably simple, although when you are done I would suggest adding node to your PATH environment variable if you are working on Windows.

 

Now that you have Node installed, let’s create a simple server.  Create a file called server.js like this:

 

var express = require('express'), server = express.createServer(); server.use('/cocos2d', express.static(__dirname + '/cocos2d') ); server.use('/cocosDenshion', express.static(__dirname + '/cocosDenshion') ); server.use('/classes', express.static(__dirname + '/classes') ); server.use('/resources', express.static(__dirname + '/resources') ); server.get('/', function(req,res){ res.sendfile('index.html'); console.log('Sent index.html'); }); server.get('/api/hello', function(req,res){ res.send('Hello Cruel World'); }); server.listen(process.env.PORT || 3000);

 

And… that’s it, a fully functioning web server.

 

That first line is the key, where we require(‘express’).  Express is the module that is doing the heavy lifting on the server side.

 

There is however a small amount of configuration you need to do.  You need to tell node to install the express module.  This is pretty simply done though, open a command prompt and navigate to your project directory, then type:

npm install express

 

npm is the node package manager, and it will download and configure your project to work with express.  Now that we are configured, lets get back to code.

 

The next four lines are defining a series of static routes.  Essentially, if a web request comes in to any of these paths  ( for example  http://localhost/cocos2d ), node will simply serve the files back to the requesting browser, just like IIS or Apache would.  These four lines will result in /cocos2d, /cocosDenshion, /classes and /resources folders having their files served, so when your HTML file requests /classes/cocos2d.js, the file will be returned.  This is how we will allow our user to download our scripts and resources.  In this particular, I am porting the class from this tutorial to run from Node, which is why we require a resources and cocosDenshion folder.

 

Next is a GET request handler for “/”.  In HTTP, there are two kinds of requests, GET ( urls ) and POST ( form submissions ).  In this line we are saying if someone requests our web root, our function is called, which simply sends the file index.html back.

 

A moment later, we set up another GET handler for the route (URL) /api/hello, which simply returns the string “Hello Cruel World”.  This is a very simple web service, and we will see it in action shortly.

 

Finally we start our server listening on port 3000, or whatever port the running environment forces us on, in case our host has such limitations.  At this point, we have a fully functioning web server. 

 

However, I made a few alterations to the last tutorial’s file layout to better be served by Node.  Our folder structure now looks like:

image

 

Don’t worry if you are missing a few folders ( .git and .idea for example ) or files ( package.json or Procfile ), we will covers those later.

 

I altered all the paths in cocos.js and MyFourthApp.js because cocos2d was moved to the classes folder.  Otherwise the code is pretty much unchanged from the last tutorial.  You can download the full source at the end of this post if you want to see the complete changes.

 

I did make a few small alterations though, beyond changing paths.  I added a reference to jQuery in index.html, like this:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="classes/cocos2d.js"></script>

 

I also added the following line to cocos2d.js:

else { cc.setup("gameCanvas"); jQuery.get("/api/hello", function(data,textStatus,jqXHR){ cc.Log(data); });

 

So what exactly is this line of code doing?

 

Remember earlier in server.js where we added a route handler for /api/hello?  Well this is about as simple a REST based web request as you can make.  This uses jQuery to make an AJAX call to our server, which returns the string “Hello Cruel World”, which we log to the console.   

 

Why?  Well, absolutely no reason… yet.  But this is a very primitive example of something we are going to do in more complexity later on.  We can do processing on our node based server, and handle it in our cocos2D client.  Through this mechanism we can make up for the limitations of client side Javascript, or enable server side functionality.  You can easily request data from a server without having to reload your page.

 

 

Now you can run your server.  Open a command prompt, navigate to your project directory and type node server.js.  If all went well, there should be no error messages.  Now open up a web browser and navigate to http://localhost:3000 like this:

image

 

Here is your cocos2D application hosted in a custom Node server viewed in a browser, and if you look at the JavaScript console, you will see the “Hello Cruel World” message logged by cocos, but returned asynchronously from the server.  To shut down your server, simply press CTRL + C.

 

 

At this point we have a working web server, capable of hosting a cocos2D application ( and replacing the need for WAMP completely ), making successful, if simple, web services calls between the client and server.

 

You can download the full project right here.

 

Next up, we will look into a problem many web developers face… where the heck am I going to put this thing???

 

EDIT:  Next part is now up.

Programming , , ,

blog comments powered by Disqus

Month List

Popular Comments