Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
19. December 2015

 

You may have noticed this year that GameFromScratch was increasingly active creating videos on YouTube.  Inititally it was pretty much a 1 to 1 relationship with GameFromScratch.com.  That is, for every video on YouTube, there was a corresponding post here on GFS.  Recently however I have found some topics are more video friendly or more text friendly and that 1 to 1 relationship doesn’t always exist.  Therefore I’ve decided to launch this weekly recap series which simply brings together the last weeks YouTube videos in a single place.

IMG_1826

 

 

This week saw the launch of a new video series, Bad GameDev!  No Cookie!  Which looks at game development mistakes in actual games.  So far there are two videos in the series. 

The first series looks at the bad 3rd person camera in the on-rails iOS shooter Freeblade.  Unfortunately Camtasia picked up the wrong mic for voice over in this video, so the audio quality is horrid.  Sorry about that.

Bad GameDev! No Cookie! Game Design Mistakes: Freeblade

 

Next in the series we looked at Space Marine and show the folly of a bad FoV.

Bad GameDev! No Cookie! Game Design Mistakes: Space Marine

 

We also had 3 additions to the GameDev Toolbox Series, an ongoing video series showcasing the tools of the game development trade:

Texture Packer

Sculptris

Tiled Map Editor

 

We also took a quick look at the AirPlay/Google Cast desktop server, Reflector2

Reflector2

 

And of course the recap of last weeks game development news.

Week 4 News Recap

General

18. September 2015

 

The following is a video showing the process discussed in this earlier tutorial.  For all the source code mentioned, see the earlier link.

 

 

The video is also available in high definition here.

Programming , , ,

11. August 2015

 

Welcome to the very first tutorial in the Paradox Game Engine tutorial series, this section is going to cover installation and getting started.  The process is in reality incredibly straight forward, so this should be fairly short.  If you are unfamiliar with the Paradox Game Engine, consider starting here for an indepth review of Paradox’s functionality.

 

As with most tutorials on GameFromScratch, this one is also available as an HD video.

 

Getting Started

To get started, of course you are going to need download a few things.

 

Either version of Visual Studio will work.  If you don’t have a license, remember the community edition is free for small teams and people who make less than $1million per year in revenue.  You don’t specifically need to have Visual Studio installed, Paradox actually ships a copy of MSBuild and the .NET framework includes the C# compiler.  If you want to instead use your favorite text editor, that is an option.  These tutorials are all going to assume you are using Visual Studio however.

 

If you are going to be using Visual Studio, and don’t already have it installed, make sure it is installed before installing Paradox, as part of the Paradox installation will install a plugin to Visual Studio.  I am not going to go through the Visual Studio installation process; however if you choose strictly default settings, it will work out just fine.

 

Once you have Visual Studio installed, make sure you run it at least once to allow it to do some late step configurations.  This may not be strictly necessary, but better safe than sorry.

 

Next run the Paradox Installer you downloaded earlier.

image

 

The install process is extremely straight forward, basically just asking you which shortcuts you wish to create.  Once complete, the Paradox Launcher will be run.  This is the application you use to create new or open existing Paradox projects, as well as managing which version of Paradox you have installed:

image

 

It will now detect that you don’t have an SDK installed ( assuming you don’t have a prior install ), when prompted, choose yes:

image

 

It will then ask if you wish to install the Visual Studio integration, again click yes:

image

 

Your Paradox install should now be complete.

 

Creating Your First Project

 

Now that Paradox is installed and configured, let’s create our first project.  In the Launcher, click the big purple Start button,  your actual version number could obviously differ from mine.

image

 

This will launch the New/Open Project dialog.  You may notice there are several examples you can load.  In this case we are going to create a new project instead. 

image

 

The only thing to be aware of here is when naming your game, be sure to use a C# namespace friendly value.  For example, Game3D works, but 3DGame will work here, but then blow up when you get to the project in Visual Studio.  For a very detailed description of what’s allowed and what’s not in a C# variable see here.  Simple rule of thumb however, don’t start with a number or punctuation other than an underscore and keep away from oddball characters and you should be good.

 

Once you click the Select button, you will be taken to another dialog:

image

 

Here you can choose which platforms you want to support.  You may notice that Windows Store and Windows Phone are both showing “The Requirements to build for this platform are not met on this machine”, that is because I do not have the proper signing keys configured.  The value “Windows 10” might also be a bit confusing, as a normal “Windows” project will run just fine on a Windows 10 machine.  In this case “Windows 10” refers to the now renamed Universal apps, that enable your code to run on desktop and mobile Windows platforms.  It’s also important to note that Android and iOS development require a Xamarin license.

 

The final options are for configuring the starting graphics configuration as well as the starting orientation.  Once done, click OK.  This will then launch Paradox Studio:

image

 

Paradox creates a simple preconfigured scene for you.  Most importantly it sets up all the graphics configuration for you.  Feel free to delete everything from the scene, although I would recommend keeping at least the camera initially.

 

You can now test that your Visual Studio integration works properly.  In the toolbar you should see this:

image

 

If you have multiple versions of Visual Studio installed, you should be able to select which one you wish to use.  In my case I have only Visual Studio 2015 installed.  Either click the version you want to run, or the toolbar Visual Studio icon for the default.   Visual Studio should now open with your project displayed:

image

 

Looking in Solution Explorer you should see a project ending in .Game, as well as one project per platform you selected.  The .Game project is where the majority of your game logic will go, while platform specific initialization code will go in each platform project, if required that is.  You should also now see a new menu Paradox if you install completed correctly:

image

 

That’s it.  Paradox is now up and running and you’ve created your first project.  Stay tuned for the next part where we take a tour of Paradox Studio.

 

The Video

 

Programming , , ,

10. July 2015

 

A new Blender tutorial series was just released here on GameFromScratch.com.  It has actually been under development for a couple months, I have just finally put together a table of contents page for it.

 

The series is called Learning Blender, One Hour at a Time and the entire premise is to break learning Blender into one hour chunks and cover as much as possible in each hour.  Currently there are video tutorials for introduction, modelling, texturing and animating.  There will be one last video on rendering released shortly.  Combined, the five hours of instruction should give you all the details you need to get started learning Blender.  Additionally there are a few simple tips and trick videos we have published, they have been gathered together into one place for the first time.

 

Below is just a screenshot of the actual series table of contents.  Click here or the image below to go to the actual tutorial.

image

 

Enjoy!

Art , ,

7. June 2015

 

In the previous tutorial we covered Sprite Animation, although to be honest it was more about creating animation ready sprites.  The actual way we performed animation wasn’t ideal.  Fortunately we are about to cover a way that is very much ideal… and capable of a great deal more than just animating sprites!

 

As always, there is an HD video of the this tutorial available right here or embedded below.  It’s important to have followed the previous tutorial, as we will be building directly on top of it.

 

Keyframes Explained

 

Before we get to far into this tutorial I think it’s pretty critical to cover a key concept in animation, keyframing.  Essentially you animate by setting a number of “key” frames in the animations timeline, then let the computer take care of the rest.  You can set a keyframe on just about any property available in Godot as we will soon see.  For example you can create a key on the position value of a sprite.  Then advance the timeline, set another key at a different position.  The computer will then interpolate the position over time between those two keys.  This interpolation between key frames is often referred to as a “tweening” as in “inbetween”.  Don’t worry, it will make a lot more sense when we jump in shortly.

 

AnimationPlayer

 

In the previous tutorial, we created a simple animation using code to increment the current frame at a fixed play rate.  Now we are going to accomplish the same thing using the built in animation system in Godot. 

Start by opening up the previous project and remove the code from our AnimatedSprite.  Now add a AnimationPlayer node under the root of your scene, like so:

image

 

With the AnimationPlayer selected, you will notice a new editor across the bottom of the 2D window:

image

 

This is your animation timeline control.  Let’s create a new animation named “walkcycle”

Click the New Animation icon

image

 

Name your animation and click Ok

image

 

Click the Edit icon

image

 

This will extend the animation options even more.

image

 

First let’s set the duration of our animation to 2 seconds:

image

 

You can then adjust the resolution of the animation timeline using the Zoom slider:

image

 

Here we’ve zoomed in slightly to show just over 2 seconds:

image

 

Now that we are in edit mode with our AnimationPlayer selected, in the 2D view, you will notice there are new options available across the top

image

 

This is a quick way to set keys for a nodes positioning information.  You can toggle on or off whether the key will store location, rotation and/or scale data.  You set a key by pressing the Key icon.  The first time you press the key icon you will be prompted if you want to create a new track of animation.

Select your sprite, make sure the timeline is at 0 and create a key. Advance the timeline to 2secconds, then move the sprite to the right slighly, then hit the key icon again to create another key frame.

g1

 

Press the play icon in the AnimationPlayer to see the animation you just created:

g2

 

Well that’s certainly movement, but pretty crap as far as animations go eh?  How about we add some frame animation to our mix.  Here is where you start to see the power of animation in Godot.

 

With the AnimationPlayer selected, rewind the timeline back to zero, make sure you select your AnimatedSprite, then in the Details panel you will notice that all of the properties have a little key beside them:

image

 

This is because you can keyframe just about any value in Godot.  We are now going to do it with the Frame value.  This is the value we programmatically increased to create our animation before.  Now we will instead do it using keyframes.  With the timeline at 0, set Frame to 0 then click the Key icon to it’s right.  Click Create when it prompts you if you wish to create a new track.  Then move the timeline to the end, increase Frame to the final frame (21 in my case), then click the Key again.  This will create a new track of animation:

image

 

You can see the different track names across the left.  The blue dots represent each key frame in the animation.  There is one final change we have to make.  Drop down the icon to the right of the animation track and change the type to Continuous, like so:

image

 

Now when you press play, you should see:

g3

 

Playing Your Animation

 

While your animation appears properly if you press Play in the AnimationPlayer interface, if you press Play on your game, nothing happens.  Why is this?

 

Well simply put, you need to start your animation.  There are two approaches to starting an animation.

 

Play Animation Automatically

You can set the animation to play automatically.  This means when the animation player is created it will automatically start the selected animation.  You can toggle if an animation will play automatically using this icon in the Animation Player controls.

image

 

Play an Animation Using Code

Of course, AnimationPlayer also has a programmatic interface.  The following code can be used from the scene root to play an animation:

extends Node

func _ready():
   get_node("AnimationPlayer").play("walkcycle")

 

Scripting the AnimationPlayer

 

Say you want to add a bit of logic to your keyframed animation…  with AnimationPlayer you have a couple options we can explore.

 

First there are the events that are built into the AnimationPlayer itself:

image

For simple actions like running a script when an animation changes or ends, using AnimationPlayer connections should be more than enough.

 

What about if you wanted to execute some code as part of your animation sequence?  Well that is possible too.  In your Animation editor window, click the Tracks button to add a new animation track:

image

 

Select Add Call Func Track:

image

 

Another track will appear in your animation.  Click the green + to add a new keyframe.

image

 

Now left click and drag the new key to about the halfway (1 second) mark.  Switch to edit mode by clicking the pen over a dot icon, then click your keyframe to edit it.  In the name field enter halfway.  This is the name of the method we are going to call:

g4

 

Add a method to your root scene named halfway:

extends Node

func _ready():
   get_node("AnimationPlayer").play("walkcycle")

func halfway():
   print("Halfway there")

 

When the keyframe is hit, the halfway method will be called.  Adding more function calls is as simple as adding more keys, or complete Call Func tracks.  As you may have noticed in the video above, you have the ability to pass parameters to the called function:

image

 

Finally, you can also access animations, tracks and even keys directly using code.  The following example changes the destination of our pos track.  This script was attached to the AnimationPlayer object:

extends AnimationPlayer


func _ready():
   var animation = self.get_animation("walkcycle")
   animation.track_set_key_value(animation.find_track("AnimatedSprite:transform/pos"),1,Vector2(400,400))

 

Now when you run the code you should see:

g5

 

The Video

Programming , , ,

Month List

DisqusCommentsSummary

Course-specific creative-The Complete iOS 9 Developer Course - Build 18 Apps