AppGameKit

AppGameKit

Not enough ratings
Getting Started With 3D In AGK2 - #1
By Patrick Griffiths | Indieworx
A very light and simple introduction to 3D in AGK2. In this first part we will go over the basics of loading a 3d object in to the scene, apply a texture and rotate the model infront of the camera for viewing...
 
Rate  
Favorite
Favorited
Unfavorite
Starting From Scratch...
So, first thing's first, you should go ahead and create a new project after loading up AGK2. Once you do you should be presented with what you see in the following screenshot:
http://i.imgur.com/QUE6sRo.png

This is how every project will look when you start from scracth with a fresh project. Some people use a template that they've created, to save time but for now... This is where we will start for you to learn how to get into the language and application with a simple step by step process.

I will include a code snippet just to be on the safe side, for if the image is ever down for whatever reasons:

// Project: SteamGuide-3D-Basics-#1 // Created: 2015-07-09 // set window properties SetWindowTitle( "SteamGuide-3D-Basics-#1" ) SetWindowSize( 1024, 768, 0 ) // set display properties SetVirtualResolution( 1024, 768 ) SetOrientationAllowed( 1, 1, 1, 1 ) do Print( ScreenFPS() ) Sync() loop

Now, I know you may not understand everything that is there, but you should be prepared to go off and look a few things up here and there, that's how I've managed to grasp the basic concepts of 3D in AGK thus far.

// set window properties
SetWindowTitle( "SteamGuide-3D-Basics-#1" )
SetWindowSize( 1024, 768, 0 )
As you may have guessed, the "SetWindowTitle" is just naming the window that your application or game will run in. Then you can set a specific size with the following command after that. Witht he "SetWindowSize" command the perperties (the numbers within the "()") are to set the following: ( width, height, fullscreen ). for the fullscreen you can see that the default is set to "0" this means that it will not run in fullscreen, if you wish to, set that number to "1".

// set display properties
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )
Now the next couple of lines are easy enought o understand too...

"VirtualResolution" is AGK's default coordinate system where 0,0 is the top left and 100,100 is the bottom right. This is designed to help across multiple platforms and screen resolutions The alternate option is to set a fixed resolution and where platforms that do not match up will auto scale to fit using black boarders where required... Lets move on though.

"SetOrientationAllowed" Is the way that AGK let's the device running your application know what kind of rotations are allowed wtihhin your application, this allows us to lock rotation if desired. In the base default code you can see the following properties (1,1,1,1) there are two properties for each rotation, so that we can account for upside down on devices, so (portrait, prtrait2, landscape, landscape2) and as before 0 and 1 where 0 is no and 1 is yes. Portrait2 and Landscape2 are the upside down versions of the rotations.

Now that we have the basics of what a new project contains and what everything means, we can move onto the actual tutorial and work with 3D in AGK.

It's worth noting that currently there is no real animation support within AGK, you have physics and tweening capabilities but no bone based animation support and model formats are limited to obj (as far as I am aware.)
Loading A Textured Model Into The Scene
The first thing that I would like to quickly make a note of is that I will include an image of the addition I have made, followed by a code snippet for you to read over and an explanation of what we just did and why, to the best of my ability to explain such information.

I have taught myself most of this and some portions of the code I don't 100% understand, where that is true I will explain that and link to or reference where I found the initial piece of information to put this together and get things to work for me.

With that being said, here is what I tend to add first to my new projects:

// Project: SteamGuide-3D-Basics-#1 // Created: 2015-07-09 // Author: Patrick Griffiths // set window properties SetWindowTitle( "SteamGuide-3D-Basics-#1" ) SetWindowSize( 1024, 768, 0 ) SetClearColor(30,30,60) // set display properties SetVirtualResolution( 1024, 768 ) SetOrientationAllowed( 1, 1, 1, 1 ) do Print( ScreenFPS() ) Sync() loop

As you can see the only thing that I've included is the "SetClearColor" followed by three properties (30,30,60) and this is mostly for asthetics than anything else, but it does help me when I am experimenting with 3d. What this does is change the background colour of the scene based on the properties you input which are (red, green, blue). There is no specific set colour I suggest to go with, I personally just threw in some random numbers just so that things are visually different, if a model is rendered as black when we try to load a texture for whatever reasons, then you willl see that the model is being loaded just fine and you know what to go and look to fix.

Now that we have that out of the way, let us move on...
// Project: SteamGuide-3D-Basics-#1 // Created: 2015-07-09 // Author: Patrick Griffiths // set window properties SetWindowTitle( "SteamGuide-3D-Basics-#1" ) SetWindowSize( 1024, 768, 0 ) SetClearColor(30,30,60) // set display properties SetVirtualResolution( 1024, 768 ) SetOrientationAllowed( 1, 1, 1, 1 ) //Load textures testTexture = LoadImage("mesh28-0.jpg") do Print( ScreenFPS() ) Sync() loop

When we want to use a texture or even a model for that matter, we first need to set them, I commented as "load textures" because it just sounds better and that is sort of what we're doing, we load the texture and then apply it. So this stage we use the "LoadImage" command... The way this works is that we need to define a name for this texture, I have gone ahead and used testTexure, you can name this whatever you want just know that later when you see me referring to that texture name you will have to replace it with whatever you chose to call your texture. the prperty following the command is the location of the texture image. The default is within your project directory there will be a "Media" folder, that is the default location. Anything you call will be from there, if you wish to add a sub-folder you will have to instead of calling "mesh28-0.jpg" you will have to call "foldername/image.jpg" I hope that is making sense for you.

If you're wondering why the unusual name for the texture image, I snatched the texture from the only 3d example provided with AGK, you can find it in your installation under examples and you will have teh same texture available to you, that is why I snagged it from there. So that anyone can follow along with ease.

Now that we have loaaded in the texture and given it a name, we need to load in a model to place it on!!

// Project: SteamGuide-3D-Basics-#1 // Created: 2015-07-09 // Author: Patrick Griffiths // set window properties SetWindowTitle( "SteamGuide-3D-Basics-#1" ) SetWindowSize( 1024, 768, 0 ) SetClearColor(30,30,60) // set display properties SetVirtualResolution( 1024, 768 ) SetOrientationAllowed( 1, 1, 1, 1 ) //Load textures testTexture = LoadImage("mesh28-0.jpg") //Load models testModel = LoadObject("mesh-pCube1.obj") do Print( ScreenFPS() ) Sync() loop

Now what I;ve done here is used the "LoadObject" command to locate and load an obj file from the media folder of the project. I opened my 3d software package and created a cube primitive then exported without doing anything more... Then simply loaded it as we did with the texture before, and as with the texture file we also need to attach an ID to the model which is testModel in this instance but it can be whatever you want it to be.

In this screenshot you can see that I've shared the preview of it running this time as well, it's nothing special yet but it's getting there for sure!

We now have a model in 3d space loaded into our little application that took us only a few mins to code from scratch!! Congratulations! You've taken the first step towards 3D in AGK... Now to take it a little further and impress our friends a little more ;)

So... Where we just added the "LoadObject" command and got the model into the scene, let us go to the next line and add something to apply the texture we loaded earlier onto our model.

//Load models
testModel = LoadObject("mesh-pCube1.obj")
setobjectimage (testModel,testTexture,0)

The SetObjectImage is the command for applying the texture image to the model. We define which image and which model by naming them after it as you can see in the quote above...

Now lets see what we get!


As you can see, we now have a 3d model, in the scene WITH a texture loaded!! Awesome... The next step is to make things a little more presentable and pleasing so it seems a little more impressive when we show someone what we just did :P

The first thing I want to do is bring the camera closer to the object and also rotate the object at an even pace so that we can view the texture all around the model.

To do this we can add the following commands:
MoveCameraLocalZ
RotateObjectLocalY

Here is the code after adding those commands:
// Project: SteamGuide-3D-Basics-#1 // Created: 2015-07-09 // Author: Patrick Griffiths // set window properties SetWindowTitle( "SteamGuide-3D-Basics-#1" ) SetWindowSize( 1024, 768, 0 ) SetClearColor(30,30,60) // set display properties SetVirtualResolution( 1024, 768 ) SetOrientationAllowed( 1, 1, 1, 1 ) //Load textures testTexture = LoadImage("mesh28-0.jpg") //Load models testModel = LoadObject("mesh-pCube1.obj") setobjectimage (testModel,testTexture,0) // position camera movecameralocalZ (1,15) do // rotate objects RotateObjectLocalY(testModel, .4) Print( ScreenFPS() ) Sync() loop
"movecameralocalZ (1,15)" the properties here are referring to the camera ID as "1" which would be "2" if we had a second camera and wanted to move that one, followed by the amount that it is effected. "15".

With the RotateObjectLocalY we tell the application that the model to effect is "testModel" and to have to rotate in the localY axis by "0.4".

Then we have the real magic happen! :D Run the project and be impressed!! a laggy gif of what it should look like: http://i.imgur.com/VeCGbam.gif the gif compression screwed up the smoothness.
< >
2 Comments
Patrick Griffiths | Indieworx  [author] Jul 29, 2015 @ 5:21pm 
Thanks Arv... Ill post more parts to working with the 3D side of AGK soon, I've made some more progress and have some interesting content to post (:))


Regards,
Patrick.
Harv Jul 29, 2015 @ 4:23pm 
Great stuff. Very easy to follow, can't wait to read more! Thanks for this.