Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

28. February 2016

 

I have done several complete Blender tutorials here on GameFromScratch on using Blender including this one and this one that take you from complete beginners to reasonably fluent.  Taking the next step however can be quite tricky.  So I’m going to do a series of quick and simple tutorials showing how to accomplish a specific task in Blender.  Keep in mind, this shows one way of doing things, not necessarily the right way.  These tutorials assume you already know how to operate Blender, so if you do not, be sure to check out one of the two earlier linked tutorials.

There is now a video version of this tutorial available here.

 

Modeling a Low Polygon Sword

In this tutorial I am going to model the entire thing as a single mesh.  You could of course model it component by component if you preferred.

 

Start with the default Blender cube.

image

 

Switch to edit mode, insert an edge loop (Ctrl + R), apply immediately.

image

 

Switch to Polygon editing mode (CTRL + TAB + 3), select the left most face and delete (X) select Vertices:

image

 

Now go into modifiers, add a Mirror modifier.  Select the appropriate axis to mirror along (Y in my case)

image

 

This puts us back to having a cube again:

image

 

Now, still in edit mode, select everything (A), then scale along X then Z axis ( S-X, then S-Z ), so your shape looks like this:

image

 

Select the end face (non-mirrored one) and extrude ( E ) it several times.

image

 

Now switch to the side view, then apply a Bend (Shift + W), like so:

image

 

This presents a small problem, our vertices left the mirror axis:

image

 

The easiest solution is to select the top vertices, then in properties (N), manually set the mirror axis value to 0, then repeat for the bottom vertices.

image

 

I’m going to be extruding the sword blade out next, but first I want the edge to be flat so the blade extrudes cleanly.  This is easily accomplished in a non-intuitive way...  select these edges:

image

 

Then scale 0 along the axis you want to align.  This can be accomplished with S+Z+0, aka, scale 0 along the Z axis, with the following result:

image

 

Easy enough...  now we need to make a few edge cuts so we have a nice extrude-able blade.  First make a pair of loop cuts like so:

GIF

 

By the way, when making your edge cut (Ctrl + R), before right clicking to commit you can use the wheel mouse to make multiple evenly spaced cuts.  Or new edge loops are a bit two far apart when evenly spaced, so move them closer together.  With both newly created loops still selected, simply scale on the X axis (S+X) and move the two edge loops closer together.  Then add another edge loop at the edge, like so:

image

 

Now simply extrude our newly created polygon  a couple times:

image

 

Grab the top most edge to make things pointy...

image

 

Now taper the edge however you like your sword to look:

image

Finally we need a hilt...  Everything we need is in place already...  If you look at the bottom of the sword, it should look something like this:

image

 

First less flatten the one polygon (S+Z+0) like we did with the blade, just this time with the single polygon selected:

image

 

If you prefer the look, you could have flattened the entire bottom of the sword.  Next scale along the X axis, then move it slightly down the Z axis:

image

 

And time for more extrusions...

image

 

Now move and scale things until it looks like you want...

image

 

TADA... one low polygon sword in about 3 minutes time.  Of course you probably want to add a bit of detail here and there...  Mostly this can be accomplished with bevels (CTRL + B), for example using a bevel we can add so detail to the hilt or handle should we wish, like so:

GIF2

 

After loop cutting in and beveling whatever additional detail you wish into the model, leave edit mode and apply the Mirror modifier:

image

 

And tada:

image

Art ,

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

 

Today Amazon launched the Lumberyard Game Engine a modified and completely open source version of the CryEngine from Crytek.  Free.  So, what’s the catch?  You have to run your server component either on your own server or using Amazon’s web services.  Yeah, that’s it.  A pretty sweat deal all around.  So today I took a quick look at the contents of the engine as you can see below or in the video available at the bottom of this page.  I have only a couple hours experience with the engine, so don’t expect an in-depth review, this is just a quick hands on to give you an idea of what Lumberyard is and what you get.

 

Lumberyard installs as a 10GB zip file.  Simply extract the contents of that archive to folder on your system.  It’s contents look like:

image

Next run LumberyardLauncher.bat and you get this initial configuration window:

image

It unfortunately does not seem to play nice with high DPI displays :(.  Check all the features you require then click the next error.  You will then be informed what software you need to install:

image

Thankfully (for my cellular bill at least!) each component already appears to be locally available.  Next it’s going to ask you for a variety of SDKs.  Most of them are optional, such as Photoshop, Max and Maya plugin SDKs, but some are not such as NVidia and PowerVR SDKs.  Annoyingly, some of these require registering an account to download.  Both SDKs are small downloads, the the PVRTextTool will download 100+MB of files.

image

Finally you will be asked which plugins you wish to configure, and we are finally done the configuration phase.  Now simply click Configure Project to create a new Project:

image

 

This will launch the Lumberyard Project Configurator tool:

image

 

For now I’m simply going to click Launch Editor for the SamplesProject project.  Now we wait...

image

Ugh, another login:

image

Finally!

image

The Getting started guide link doesn’t work right now.  Instead use the URL https://aws.amazon.com/documentation/lumberyard/ to access the documentation.

 

I’m going to go ahead and create a new level.

image

Straight forward so far.

 

And finally the Lumberyard editor:

image

Again, high DPI support isn’t great as you can see from the cropped menu panel across the bottom.  Let’s take a look at a some of the included tools.

 

Terrain Editor

image

 

Asset Browser

image

 

Flow Graph (Visual Scripting)

image

 

Dialog Editor

image

 

Geppetto (Animations)

image

 

Database View

Img1

 

UI Editor

image

 

Obviously this is only a very surface level look at some of the tools that are bundled in the Lumberjack Game Engine.  It certainly has me interested in learning more.  If you are interested in seeing tutorials for this game engine, let me know and I will dive in deeper.  Even if I don’t create a tutorial series, I will certainly review this game engine in the typical “Closer Look” style.

 

There is a quick video hands on available, embedded below or in 1080p here.

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 , ,

3. February 2016

 

In the previous tutorial we installed the Superpowers game engine and created our first game.  In this tutorial we are going to get comfortable with the editor and create our first scene.  First let’s start with the editor, which we should have loaded at the conclusion of the last part.  In the top left corner, there is a control for managing assets.  Click the + page icon and select scene:

image

 

Then in the resulting dialog:

image

 

Now you should see your newly created scene in the list on the left hand side of the application:

image

 

By default (or by double left clicking the scene if not), your newly created scene should appear in the editor view in the middle of the screen:

image

 

Given that it’s currently empty, you just get a black screen.  For this example we are going to work in 2D, so switch to 2D mode:

image

 

Now that we have a scene created and loaded, we have new options on the right hand side of the screen.  Think of it this way...  the left hand side of the screen holds the assets that go together to make your game.  The right hand side holds the contents of each particular scene.  Switching between scenes will change the contents available on the right, but the assets on the left are available across your entire game.  Here is the right hand window for scene graph management:

image

 

Superpowers follows the common practice of being a component based game engine.  That means that the elements of your world are composed of various components and there is some kind of object that holds these components.  In Superpowers the component container is called an actor, and every object draw in the scene is ultimately an Actor.  Let’s add one to the scene now, click the Star with a + icon, pictured above.  You will then get a popup asking you to name your actor:

image

This Actor is going to be the camera, so name it accordingly.  Call it either Camera or Stephen, whichever makes more sense to you.  Personally, I went with camera.  Once created, you can see that all actors by default have a Transform component automatically attached.

image

You can also now see and position our actor in the scene view:

image

However, for now it’s just a manipulator widget, as there is no visible component attached to this actor.  You can use this widget for changing the position of the object within the scene, with each coloured arrow corresponding to a particular axis of movement, or by using the gray box in the center to move freely.  We will come back to this widget later, for now we need to make our camera a camera.

 

To create a camera, we simply add a Camera component to our newly created actor.   Down below the controls for controlling the actor’s position there is a button New Component:

image

Click it.

Now select Camera as the Component type:

image

You should now see a new editor for our newly added component:

image

Since we doing a 2D game, set the Mode to Orthographic, which means that images will remain the same size regardless to their depth within the scene. 

We now have a camera, and a scene.  Stay tuned for the next part where we will finally draw something on that screen!

 

Next Part

Programming ,

Month List

Popular Comments

Unreal Engine 4.12 Preview 5
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


24. May 2016

 

Unreal Engine 4.12 gets one step closer with the release of preview 5.  Of course this is a work in progress build, so don’t use it in production.  Preview 5 adds some new features including foliage scalability, a new animation node, a pixel inspector tool ( click a pixel on screen to visualize the material and rendering state that made that pixel happen ).  Of course there are several fixes in this release as well:

 

Important Known Issues

  • For deployment to additional platforms such as Android, iOS, HTML5, Linux, and TVOS you must have the optional "Editor symbols for debugging" installed. This is available via the Launcher by selecting "Options" on the 4.12.0 Engine slot. This is a transitional phase to new functionality, and the workflow will be improved in an upcoming release.
  • Google VR (Daydream) doesn't work in the Launcher release, but is functional via Github (UE-31186)

Cheers!
Fixed in Preview 5 - CL 2986880
Fixed! UE-30836 [CrashReport] UE4Editor_Engine!UNavigationSystem::RegisterNavData() [navigationsystem.cpp:1810]
Fixed! UE-30470 Restarting Project Resets Scoring Equation in EQS
Fixed! UE-30411 Attached Project Crashes When Setting RVO Avoidance
Fixed! UE-31118 Blueprints with ClassDefaultNodes compile very very slowly
Fixed! UE-30954 CRASH: One-off crash in editor when saving outdated packages while modifying blueprint
Fixed! UE-31027 Crash compiling blueprint after deprecating the blueprint
Fixed! UE-31034 Blueprints_GetClassDefaults Crashes the editor when class is changed to NONE...
Fixed! UE-30919 Actor Blueprint Asset Crashes when opened in Blueprint Editor
Fixed! UE-28536 Attached Project Crashes on Attempting to Play in Standalone
Fixed! UE-30556 Crash Report Client window missing functionality after disabling and re-enabling the GPU
Fixed! UE-29794 Crash opening QAGame after copying when logged into source control
Fixed! UE-30831 [CrashReport] UE4Editor_SceneOutliner!SceneOutliner::FGetVisibilityVisitor::RecurseChildren() [sceneoutlinergutter.cpp:24]
Fixed! UE-30968 Ctrl+Alt selection drag inside to outside of Matinee window will crash the editor
Fixed! UE-30613 [CrashReport] UE4Editor_UnrealEd!FMainMRUFavoritesList::ContainsFavoritesItem() [mrufavoriteslist.cpp:98]
Fixed! UE-30276 Standalone game window snaps back to original position after being moved
Fixed! UE-30677 Toggling WindowedFullscreen has issues with "creep" and bad window positioning
Fixed! UE-22691 Changing Media asset path can cause crash.
Fixed! UE-30698 In Cascade when using the Tab key in the module list will cause a crash
Fixed! UE-31101 Crash when clicking content browser filter dropdown
Fixed! UE-30891 CRASH: Editor crashes when Importing Actors via File > Import
Fixed! UE-30809 Merge actor panel crashes when selecting a mesh component without static mesh
Fixed! UE-30955 Morph Targets in Skeletal Mesh LODs do not behave correctly
Fixed! UE-31164 Negative rate scale on montages will not loop correctly
Fixed! UE-31119 Edits to additive animation curves do not show until applied
Fixed! UE-31039 [CrashReport] UE4Editor_Engine!UAnimMontage::IsValidAdditive() [animmontage.cpp:702]
Fixed! UE-30949 Crash Importing Skeletal Mesh LODs with a lot of morph targets
Fixed! UE-30811 Marker sync crashes when used in derived anim class
Fixed! UE-30808 Issue with static mesh merging path in HLOD system
Fixed! UE-30917 Crash occurs when landscape is selected and simulating and selecting the landscape tab
Fixed! UE-30742 [CrashReport] UE4Editor_Landscape!FLandscapeComponentSceneProxy::DrawStaticElements() [landscaperender.cpp:1122]
Fixed! UE-29083 Modulated shadows do not render in the correct area on older devices / versions of Android OS
Fixed! UE-31006 FAndroidMediaPlayer::Open() returns EMediaEvent::MediaOpenFailed even if opening is succeed.
Fixed! UE-30904 No Bloom Post-Process on device when using packaged project
Fixed! UE-20434 [CrashReport] Crash in FD3D11DynamicRHI::InitD3DDevice() [windowsd3d11device.cpp:402]
Fixed! UE-29231 Crash when shooting in Tm-Shadermodels with -Opengl
Fixed! UE-30133 Incompatible surface format error, certain maps rendering completely black on PS4 with Accurate Velocities enabled.
Fixed! UE-30341 [CrashReport] UE4Editor_Engine!FReflectionTextureCubeResource::InitRHI() [reflectioncapturecomponent.cpp:703]
Fixed! UE-31054 ToggleRHIThread and ShowMaterialDrawEvents autocomplete on the commandline but don't do anything.
Fixed! UE-30902 Translucent per pixel lighting broken
Fixed! UE-30834 [CrashReport] UE4Editor_D3D11RHI!FD3D11DynamicRHI::RHIReadSurfaceData() [d3d11rendertarget.cpp:905]
Fixed! UE-30619 Face Distortion In Morph Targets Sample
Fixed! UE-26319 Crash when DFAO is disabled and a lower scalability is used while Distance Field Shadowing is enabled.
Fixed! UE-31132 Zen fails to package for Windows and Android
Fixed! UE-31108 No Default Game Map set for Subway Sequencer project
Fixed! UE-30979 Typo in Station 1.4 on Blueprint_Communications in Content Examples
Fixed! UE-30568 "Attempted to get an item from array PerRoomProperties out of bounds" warnings in some Content Examples maps
Fixed! UE-30706 Several texture sheets in Zen Garden have bad Opacity Maps
Fixed! UE-30570 Misspelling in StaticMeshes level of Content Examples
Fixed! UE-30575 Misspelling in Decals level of Content Examples
Fixed! UE-31106 Subway Sequencer will not open when packaged for Win64: "Project requires the LevelSequenceEditor plugin."
Fixed! UE-31050 Crash opening SubwaySequencerMASTER
Fixed! UE-30986 "Enable Texture Streaming" in Render Movie Settings doesn't seem to work
Fixed! UE-30978 Crash when rendering movie with "Capture frames in HDR" enabled
Fixed! UE-30944 Crash using component none in component classes to record
Fixed! UE-30923 Crash scrubbing in sequence after adding sound wave to an actor
Fixed! UE-30771 Button hit box offset in windowed mode
Fixed! UE-31049 Update Oculus Audio SDK
Fixed! UE-30611 [CrashReport] Crash When Enabling OSVR Plugin
Fixed! UE-20109 VR Preview crashes when the number of players is greater than one
Fixed! UE-31166 Morph targets do not work in cooked builds

GameDev News

blog comments powered by Disqus

Month List

Popular Comments