Appstore Blogs

Appstore Blogs

Want the latest?

appstore topics

Recent Posts

Archive

Showing posts tagged with Tutorial

July 30, 2014

Jesse Freeman

Fire phone represents an incredible opportunity for HTML5 developers to create new experiences.  Developers now have direct access to the hardware sensors that power Fire’s Dynamic Perspective, which opens up all kinds of new ways to let users interact with your web app content. Just like native devs, Fire phone’s four dedicated cameras offer x, y and z data that you can access directly to determine where the player’s head is looking at the screen, and shift the perspective to reveal new angles on what would have otherwise been a flat web page.

Over the course of this tutorial, we will walk through how to create a simple splash screen for a game in Phaser (a popular open source game framework). We’ll also cover how to take advantage of the ability to run web apps next to native ones on the Fire phone and how to add Dynamic Perspective to create a parallax layering effect which gives the scene more of an immersive experience. Before we get started, let’s take a quick look at the splash screen we’ll be creating:

Here you can see a standard splash screen for a game where the main player will float up and down, giving the scene some sense of motion. The start text also blinks to let the player know what action they should take.

Getting Started

To start, download my Phaser Project Template from https://github.com/gamecook/phaser-project-template. You will need to have the following setup on your computer:

  • NodeJS
  • Grunt
  • IDE (Sublime Text, WebStorm, or any text based IDE)

This project will give you everything you need to run our project and has step-by-step instructions on how to get everything configured to run locally.  Once you have everything set up, rename the Phaser Project Template to DynamicPerspectivePhaserDemo, then navigate into it via the command line. You’ll want to run the following command to get everything configured:

> npm install

Once that is done running, you should be able to launch the project by typing in the following:

> grunt

This will start a local server and open up your browser to http://localhost:8080.

Now we have everything up and running to build our Phaser splash screen. Just download the artwork from here. You’ll need to create an assets folder inside of the deploy directory of the Phaser Project Template. Once that is created, put all of the artwork you just downloaded into it.

One note: if you are using WebStorm, you will want to exclude the deploy/js folder from the Directories setting so you don’t have any performance issues as our grunt script automatically rebuilds the JS code for us.

Building the Splash Screen

Step 1. Let’s create a clean slate to work from by opening our main.js file in the src/game folder of the Phaser Project Template. Once you have it open, simply delete all the boilerplate code in that file.

Step 2. Next we are going to create our new state object and Phaser game instance from scratch by typing out the following:

var state = {
    preload: function () {
    },
    create: function () {
    },
    update: function(){
    }
}

// Create new game instance
var game = new Phaser.Game(
    800,
    480,
    Phaser.AUTO,
    'game',
    state
)

Step 3. Once you have all the artwork in your assets folder, we can add it to our preload function:

preload: function () {
	this.load.image("mask", "/assets/background-mask.png");
	this.load.image("background", "/assets/background-image.png");
	this.load.image("title", "/assets/title.png");
	this.load.image("start", "/assets/start-text-touch.png");
	this.load.spritesheet("player", "/assets/player-sprites.png", 385, 412);
}

Here you can see we are simply loading everything up as an image with the exception of the player, which will be animated. That means we can use the dedicated sprite sheet loader.

Step 4. In our create() function, let’s setup the scaleMode to give us full screen on different device resolutions:

create: function () {
	this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
	this.scale.pageAlignHorizontally = true;
	this.scale.pageAlignVertically = true;
	this.scale.setScreenSize(true);
...

Step 5. We can start blocking out how the scene will be laid out. Inside of our create() method, add the following:

	// Calculate center point for laying scene out
	var centerOffset = {x: (this.world.width - 679) * .5,
                    y: (this.world.height - 466) *.5};

	// Create background image
	this.background = this.add.image(centerOffset.x, centerOffset.y, "background");

	// Save bg position
	this.bgPos = this.background.position.clone();

} // end create

This will calculate where we will center the background image. We’ll also save out the value for the background in order to use it as a reference point later on.

Step 6. If we refresh the browser, we’ll see our first glimpse at how the splash screen will look:

Step 7. Let’s get back into our code now and add in the player as well as the title and other elements that will help complete the scene. In our create() function. Below the background code we just added, put the following code:

create: function () {
...
	// Create player
	this.player = this.add.sprite(this.bgPos.x + 20, 	this.bgPos.y + 20, 'player');
	this.player.animations.add('fly', [0, 1, 2, 3], 10, true);
	this.player.animations.play("fly");
	this.playerStartPos = this.player.position.clone();

Here you can see we are setting up our player as well as creating and setting a fly animation. We also save out our player’s start position, which we will use later on when we start modifying it based on the Dynamic Perspective code we’ll add for Fire.

Step 8. Now we can wrap this up with the last bit of layout code:

	// Add mask, title and start images
	this.mask = this.add.image(this.background.position.x-50, 	this.background.position.y + 280, "mask");
	this.title = this.add.image(this.bgPos.x + 370, 	this.bgPos.y+295, "title");
	this.start = this.add.image(this.bgPos.x + 405, 	this.bgPos.y+385, "start");

} // end create

Here we add the background mask, the title and the start text.

Step 9. If you refresh the browser you will now see our scene:

While this is really easy to setup, it looks a little boring. Let’s add some animation to it.

Step 10. In our update() function, add the following code:

// Make player float up and down
this.player.y = (this.playerStartPos.y / 2) + 8 * Math.cos(this.time.now / 200) + 20;

// make start text blink
this.start.visible = Math.round(this.time.now/500) % 2 ?  true : false;

This code will make the player float up and down as well as make the start text blink. You can test this by refreshing the browser again.

At this point, we have our entire splash screen laid out. Let’s talk about how to set up the Web App Tester on Fire phone to get our splash screen ready for adding the Dynamic Perspective APIs.

Configuring the Web App Tester

Just like you can currently do on the Kindle Fire, you’ll need to download the Web App Tester on the Fire phone for this next part of the tutorial. You can get the latest build from the Amazon Appstore here.

Step 11. Once you have the Web App Tester installed, you’ll want to look up your computer’s IP address.

Step 12. When you have the IP address, you can enter that into the URL field and save it.

Step 13. Now you can pull up the Amazon WebView to make sure everything is working. Once it’s loaded, you should see the splash screen running at full screen on the device. One thing to note is that we are not locking the rotation in this simple demo, so make sure you are holding the phone in landscape. Here is the splash screen being rendered at full 720P resolution on the Fire phone:

As you can see, the process for installing and testing hosted web apps on Fire phone is straight forward. We’ll be using the Web App Tester and Fire phone for the remainder of our tutorial to make sure we can properly test the Dynamic Perspective APIs.

Adding Dynamic Perspective

The good news is that the Dynamic Perspective APIs are built into the Amazon WebView we’ll be testing within the Web App Tester. That means that you don’t have to add in any extra JavaScript libraries to start using Dynamic Perspective in your own HTML5 apps and games, it’s ready for you right out of the box. Let’s get started:

Step 14. We are going to want to make some global variables to store the motion tracking data points we’ll be using in this example. At the very top of our project above where we declared our state object, add the following:

var dpX = 0;
var dpY = 0;
var faceDetected = false;
var scale = 2;

Here we are going to store the x, y values for the Dynamic Perspective x and 7 axis, whether  facial detection is working, and a scale factor to help us manipulate the raw data into something more manageable.

Step 15. Now at the very end of our create() function add the head tracking event listener:

addEventListener('amazonheadtracking', this.handleAmazonHeadTracking);

As you can see, we’ll be using a standard event listener to implement the Dynamic Perspective APIs in our web app.

Step 16. After our create() function, add the following:

handleAmazonHeadTracking: function(event){

    dpX = event.x_mm/scale;
    dpY = event.y_mm/scale;

    faceDetected = event.isFaceDetected;
},

This will save the head tracking position values into our global variables that we set up previously. You’ll also see that we are dividing it by our scale to reduce the value a little so we don’t see large x, y values shifts since the original artwork is being scaled up to 1280 x 720 from 854 x 480. Remember that the data returned is relative to the size of the phone’s renderable screen area - not your game - if it’s up-scaled like we are doing here. You may want to modify these factors by the games scale factor instead. Here I am simply dividing them in half.

Step 17. Now let’s calculate the new position we’ll use to apply to each of our layers. Add the following to the top of our update() function:

var newPositionY = Phaser.Math.clamp(dpX, -30, 30);
var newPositionX = Phaser.Math.clamp(dpY, -30, 30);
this.background.x = this.bgPos.x + newPositionX/5;
this.background.y = this.bgPos.y + newPositionY/5;

Here we are using a method called clamp() which is part of the Phaer.Math lib. We supply our Dynamic Perspective x and y values along with a limit so it stays within the specified range. One thing to note is that since this splash screen is designed to run in landscape we need to swap the Head Tracking x and y values since they don’t change based on the phone’s orientation.

Now if you run the game on Fire phone and look at the device as well as move it around, you’ll see the background now subtly shifts in response to your head movement.

Step 18. Let’s add the same effect to our player. You’ll want to replace the current this.player.y line of code where we calculate the floating animation with the following:

this.player.x = this.playerStartPos.x + newPositionX;
this.player.y = (this.playerStartPos.y / 2) + 8 * Math.cos(this.time.now / 200) + (20 + newPositionY);

Now we are modifying the player’s x position and adding the newPoistionY to the end of where we calculate the up and down value to create some additional movement along the Y position. You may also notice that we are not dividing the new x and y values by 5 like we did in the background. This allows us to give the layers a parallax effect so that the background will move at a slower rate.

Step 19. Run the scene again on Fire phone and you’ll see the final effect.

Publishing Your App

If you have previously published a web app to the Amazon Appstore,  you can follow the same process. For those who are new to this, there are 3 easy steps after you have set up your free developer account and specified that you want to create a new app in the portal:

Step 1: Verifying Your Web App’s URL

You can now validate your web app’s URL right from the developer portal.

 

Simply put in the URL for your web app or game with the Fire phone code and click the verify button and the tool will let you know if the contents of the URL pass the preliminary submission requirements.

Step 2: Declaring Web App’s Permissions

Once your URL has been verified, you can select your app’s permission. Simply check off the options that apply to your app.

 

Step 3: Select Compatible Platforms

Then you can define which devices this web app can be published on.

While the Kindle Fire HD, HDX and Fire phone devices offer the best performance for web apps, make sure you test your web app on older devices to ensure the performance is ideal for your users. Intensive web games and anything using WebGL should be distributed on Kindle Fire HD and above.

While you can install web apps in the Amazon Appstore on any Android device that has the store installed, it will default to the native WebView on that device. This means that your app will not have access to the Dynamic Perspective APIs on other Android phones.

Step 4: Certification of Distribution Rights

Finally, certify that have the necessary rights to publish your web app.

 

Conclusion

As you can see, not only can you easily publish HTML5 apps and games alongside native Android apps through the Amazon Appstore, you also get access to the Fire’s Dynamic Perspective API just like native Android apps do. So be sure to submit your app to the Amazon Appstore to tap into millions of potential new customers. 

Related links:

- Jesse Freeman (@jessefreeman)

 

May 20, 2014

Jesse Freeman

If you followed along from the first part of this series you should be up to speed on how the Unity IDE works. In this post we will dig deeper into the code side of things. I am a big fan of C#, and while Unity Script is useful, eventually you will need a little more flexibility in your code. So, to help you along, I thought it would be valuable to write a quick primer on working with C# in Unity, as well as some of the most common APIs you will be using when we build our game.

Picking a Code Editor

In order to code in Unity you will need to pick an external editor since Unity doesn’t have one built in. By default, Unity ships with MonoBuilder, but you can just as easily switch it out for something a little more robust, such as Visual Studio if you are doing your development on Windows. Simply go into the Edit > Preferences menu and change the path to the external editor.

Once you have picked an editor you like, you are ready to start coding. In this post, I will be showing the code from Visual Studio, but MonoDeveloper will work similarly to Visual Studio but on Windows and Mac.

Data Structures

C# is a strongly typed language and is very similar to Java or ActionScript 3. If you have some background in JavaScript, it should feel familiar as well. Let’s take a look at the basics of the language. To start with, we will look at variables and lists, which are the building blocks of any language. To make a variable, simply declare it, like so:

var name = “Jesse Freeman”;

While C# is a typed language, it supports type inference, meaning that when you declare a variable you don’t always have to define the type. There are a few primitive types you should know about:

string name = “Jesse Freeman”;
int age = 34;
bool alive = true;

When it comes to numbers, you should also understand more complex types, such as Float:

float speed = 4f;

Notice that we use the f suffix for our float. Floats are numbers that contain decimals and are used for more granular positioning within the game world, as well as in the built-in physics engine. Ints are useful for whole numbers where you don’t need to perform calculations that would generate fractions, such as a player’s health. You should always be aware when using Int, Float, or other number types because you may be forced to cast it to a specific type in order to perform the calculation and you may incur a performance penalty. Here is an example:

float example = (float)age * speed;

You can learn more about the different types in the C# reference docs at http://bit.ly/1bwLAKW. The next set of building blocks is Array and List. An Array is collection of multiple variables, usually of the same type.

var stringArray = new string[2];

In C#, Array are fixed meaning you can’t alter their length. You can modify its contents via their position in the Array itself. The position is an id, which represents a unique number for each location in the Array. In C#, arrays start at 0.:

stringArray[0] = “Jesse”;
stringArray[1] = “Freeman”;

You can access values in an Array by their index just like we modified it. Here is how I would create a string with my full name from the above Array:

var name = stringArray[0]+” “+stringArray[1];

Unity also supports Lists as part of the C# library. In order to use this, you will have to import its package (System.Collections.Generic) at the top of your script, which I will show you how to do later on. For now, here is an example of a list:

List<int> listOfInts;

This is what we would call a generic List. The term generic refers to a dynamic type we can assign at runtime. Generics are a core part of the language, and something you should get familiar with as you gain more experience coding in C#. In this example, we can create a list with a type of Int. Now this generic list can contain whole numbers. For performance, you will want to use lists over arrays when you don’t know the exact size of the data and expect to be adding or removing values at runtime. An Array by contrast has a set number of items you can have in it and shouldn’t attempt to modify the length at runtime.

The last data object I want to talk about is a vector. Unity makes use of a Vector3, but now with the addition of the 2D workflow, they now rely on Vector2D a lot more. Here are examples of both:

var v3 = new Vector3(0,0,0);
var v2 = new Vector2(0,0);

Vectors allow you to store 3D or, in this case, 2D points in space so you can access the value of x, y, and z from the vector. Here is an example:

Debug.Log(v3.x); // will output 0

One quick note is that you see I am calling Debug.Log. This will output the value to the console window.

This is similar to most other languages, such as JavaScript’s console.log and ActionScript’s trace. It’s also the first step in debugging your apps if you ever need to see the value of an object or property.

Classes

C# takes full advantage of classes, interfaces, and a host of other ways of packaging up code for reusability. Unity itself is built on a very easy-to-grasp composition system, which it favors over inheritance. Let’s look at how to make a simple class. Go to the Create menu and select a new script.

As you begin to create a new script, you will notice you can select from the three built-in languages. Select C# and call the script HelloWorld.

Unity will stub out the code you need for your class for you. Here is what it will look like:

using UnityEngine;
using System.Collections;

public class HelloWorld : MonoBehaviour {

	// Use this for initialization
	void Start () {
	
	}
	
	// Update is called once per frame
	void Update () {
	
	}
}

As you can see, you won’t need to memorize how to create a class from scratch, so I will simply focus on two main parts of the script: the import block and the methods. By default, each new class extends from MonoBehavior. There are numerous methods you can take advantage of, but we’ll start with the first two: Start and Update.

Let’s go back to our previous example of a generic list. While this isn’t the traditional way of doing a Hello World example, I’ll be able to show off in a little more detail what it is like to import external libraries, create properties on a class, and output that to the console window. To start, look at the top of the class at the import statement and add the following:

using System.Collections.Generic;

Now, just before the Start method, we are going to add a property. Properties are variables that are scoped to the instance of the class itself. That is a fancy way of saying that anything inside a block of code will have access to its contents. Depending on how we declare the property, other classes will have access to it as well. C# supports private and public variable denotations. If you don’t declare one, it will automatically default to private. Add the following property above our Start method:

public List displayText;

Now, in our Start method, add the following:

displayText.Add("Hello");
displayText.Add("World");

Now we need a way to display this text. Add the following to the Update method:

Debug.Log(displayText[0] + “ “ + displayText[1]);

Here you can see we are using the Debug.Log method again, and we are accessing the first and second values of our list. It’s important to note that arrays and lists are 0 based in C# just like Java, AS3, and JS. Now we have a script that will output Hello World to the console tab on each frame, but we don’t have a place to put it. Go back to the Scene and select our camera. From here, scroll down to the bottom of the Inspector panel and select Add Component. Now select our HelloWorld script and it will attach itself to the camera.

Now, if you run the game and look at the Console tab, you will see Hello World outputted on each frame.

While this is a simple example, let’s do something a bit more interesting. Go back into your script and let’s have the camera scroll to the right. The camera is a GameObject just like any other primitive you add to the Scene via the Create menu. All of these GameObjects share some common properties, with position, size, and scale being just a few of them. Also, all of these GameObjects share the same API we are taking advantage of right now, which are the Start and Update methods. Let’s look at how we can programmatically move the camera. To get started, let’s add a new property called:

public float speed = 2f;

Next we’ll want to replace our Hello World Debug.Log call with the following:

transform.Translate(new Vector3(speed, 0, 0) * Time.deltaTime);

As you can see, we have taken the transform position property and are modifying it with a new Vector3 that contains our speed value and is multiplied by the Time.deltaTime. If you simply increased the x position by speed, you are not taking into account any slowdowns in the game itself. By using the delta between each frame, you are able to keep your movement consistent from frame to frame, regardless of dips in the frame rate. This isn’t a magical formula; all it means is that your GameObject will move at the desired distance over time. So if the frame rate drops, movement will look jerky but won’t slow down or speed up as the FPS naturally fluctuates based on other things going on in the game.

If you run the game, you will see the camera move. It will appear like the box that we created earlier is simply scrolling off the left side of the screen. Stop the game and take a look at the camera’s Inspector panel. If you scroll down to the script area, you will see we now have a new input field called Speed we can alter.

This is an important concept in Unity. Basically, any public property on a script can be edited from the IDE in the Inspector window. So, while it’s important to create default values for your properties, just know that you can alter those values on an instance-by-instance basis, and even temporarily at runtime when you are debugging. This is incredibly powerful and something we will be taking advantage of later on. Not only does this work with simple properties, such as Strings, Numbers, and Booleans, but it also works with collections, such as Arrays and Lists.

If you remember back to our first example, we had a list called displayText, which we also made public. You should see it in the Inspector panel as well, but the value is hidden. Simply click on the arrow next to its property name. You can even add new items to it by changing the Size value.

So, at this point, you should have a basic concept of how scripting works in Unity. Everything we covered here will be re-introduced in the following chapter. There is just one last thing I want to cover, which is how to think through scripts for GameObjects.

Composition over Inheritance

If you come from a traditional computer science background or have worked with other object-oriented programming languages before, you may be familiar with the argument on composition over inheritance. One of the cornerstones of OOP languages is the concept of polymorphism. While inheritance plays a large role in game development, Unity strives for the use of composition as much as possible. I consider scripting in Unity to follow the decorator and component design pattern. Each script adds additional functionality to your GameObject, but they are mostly self-contained. While some scripts rely on others to function, as we will see in the game we end up building, we really strive to create small, reusable blocks of code that can be applied to multiple GameObjects. When put together, each of these smaller scripts build up to a greater set of logic that builds up the functionality of each GameObject. While inheritance is possible, I strongly recommend thinking through composition as a means to not only create more modular, self-contained code but to also separate and encapsulate independent game logic. This kind of thinking is critical when it comes to grasping the true power of creating scripts in Unity.

Wrapping Up

By now I am sure you are itching to get into more coding, so start playing around with some of the great tutorials out there on Unity. We’ll continue to add new posts about Unity, especially with working with the new 2D workflow, over the next few months so make sure you keep checking back.

Also, don’t forget that to checkout Amazon’s GameCircle plug-in for Unity to help you integrate cross-platform leaderboards, achievements, and game data synchronization. The plug-in works on iOS, Android, and Fire OS plus with the built-in Whispersync for Games component you can back up all of your user’s game data to the cloud across all three platforms. You can now download it from the Scripting/Integration section of the Unity Asset Store.

Additional Resources

-Jesse Freeman (@JesseFreeman)

 

May 19, 2014

Jesse Freeman

Unity is the de facto game framework and IDE for a lot of the success stories you read about on multiple platforms. The IDE is very polished and easy to use. As Unity was previously just a 3D tool, there was a certain level of knowledge you needed before getting started. Now with the addition of an all-new 2D workflow, things have gotten a lot easier for game developers looking to build simple, non-3d games. In this post we’ll take a look at how the Unity IDE works for 2D game development.

Over the next few sections, we will take a look at the IDE itself and how to navigate around it and GameObject, which are the building blocks of your game. There are a lot of resources out there on Unity, but for people who have never opened it up before, this post will help get you acquainted with the basics in the IDE.

Creating a New Project

When you create a new project in Unity, you will see the following wizard:

As you can see, you are given an option to set the location of where you want to create your project, as well as packages you can include when it is created. The final thing to note, which is new in Unity 4.3, is the 2D setup tab at the bottom of the window.

By setting this to 2D, your project will automatically be configured for 2D game development. Let’s create a project called SPMS2D and toggle 2D.

Once you create your project, you will go into the editor and see the “Welcome To Unity” screen. I highly suggest going through some of the videos to learn more about how Unity works and get a sense for the workflow. Most of it is geared toward 3D, but it still applies to the stuff we will go over in this blog. I also suggest checking out the forums since there is a lot of really good information on there that can help you out when you get stuck as you are getting started learning Unity.

How to Use the IDE

At first, Unity may be a little intimidating, but I personally find that the new 2D mode actually simplifies things greatly. Here is a high-level overview of the IDE. When you first open up a project in Unity you will see the following window.

Let’s go over each section of the IDE’s window by window. First, we’ll start with the main area.

This is where you will lay out objects, preview and test your game, and also work on animations and other visual-based activities. As you can see from the tabs, the Scene and Game tabs are already open. Below the tabs, you will see a few quick-access menus. The most important is the 2D toggle, which is already activated. By unchecking it, you will go back into Unity’s native 3D view.

I’m not going to go into the 3D navigation tools since we will be focusing on 2D instead so let’s look at the Hierarchy panel.

As you add stuff to your scene, you will be able to see and access them from here. For now there is a single object, which is the camera. Also, you have access to a Create shortcut menu, which we will be using a little later on. The same options can be accessed in the IDE’s top menus as well.

While you are looking at the Hierarchy tab, select Camera so we can discuss the Inspector panel next.

Here you can see all of the properties that make up the camera for our game. Unity does a great job of visualizing all the parts that can be configured on each object in your Scene. The Inspector panel not only allows you to modify values, even on the fly while the game is running, but it also lets you add additional functionality onto any GameObject via the Add Component button.

We will get into some of these components a little later on, especially scripts, which will make up a huge part of your coding experience. For now, it’s important to note that a GameObject is anything in the game itself and may be the camera, the player, or even more complex objects like levels, UI or even utilities we build to help us visualize elements in the game. Next up is the Project tab.

Think of this as a view into the project folder itself. To help you better understand it, go to where you created your project on your system and open it up.

As you can see, in addition to all of the additional files that make up the Unity game project, you will see there is an Assets folder. This becomes your default location for everything you put in your game. Here we will store artwork, sounds, scripts, and prefabs, which are reusable pre-configured GameObjects.

The final two things I want to cover may be self-explanatory but are always useful to review. In the upper-left corner you have a set of controls to help you navigate the Scene window.

While these tools are mostly focused around navigating a scene in 3D mode, they don’t have much use in 2D mode. When working in 2D the tool you will use the most is the Hand to simply drag the screen around on the x- and y-axis.

The other set of controls handles playback and allows you to test the game.

Simply hit Play to start the testing in the Game tab.

You will also notice the Pause and Step-Forward buttons. These are incredibly helpful in allowing you to move through the game frame by frame to see what is going on. You can also go back to the Scene tab while playing the game and modify values of GameObjects at runtime. It’s important to note that any changes you make in the Inspector panel while running the game don’t get saved; it simply allows you to try things on the fly without having to stop testing, make a change, and recompile.

GameObjects

Before we get into the coding and specific 2D tools, I wanted to provide some information about GameObjects, which are the building blocks of a Unity game. As you begin to flesh things out, you will start by creating these GameObjects in the Scene. Some of them will represent your Player, bad guys, and level while others will make up utilities and Gizmos, which we will learn about later on, to help you manage other GameObjects in the game.

To get you used to working with GameObjects, let’s just create a simple cube and position it in our Scene. Go to the GameObject menu at the top, or the Create menu from the Hierarchy panel, and select Cube.

Now, if you check your Hierarchy panel, you will see the cube and the camera. Select the cube to bring it up in the Inspector panel.

If you run your game now, you will not see the cube. Likewise, you can click on the camera to preview the Scene without even hitting Run.

We can fix this by adjusting the cube’s z-axis in the Inspector window to 0.

Now, if you run the game, you will see the cube.

Notice that we still have the Inspector panel open with the cube. You can continue to play with the cube’s properties while the game runs. If you roll over any number property, you will see the cursor change into a two-sided arrow, and you can use that to click and drag the value in the field up and down. Give it a try with the x and y properties of the cube. Since we are in 2D mode, modifying the z-axis will not do anything eventful. When you stop running the game, all of the values will reset themselves.

Wrapping Up

At this point you sound be familiar with the Unity IDE and the new settings for working in 2D. In the next post I’ll cover a primer on C# in Unity and how to start making basic scripts for your own games. Stay tuned!

Also, don’t forget that to checkout Amazon’s GameCircle plug-in for Unity to help you integrate cross-platform leaderboards, achievements, and game data synchronization. The plug-in works on iOS, Android, and Fire OS plus with the built-in Whispersync for Games component you can back up all of your user’s game data to the cloud across all three platforms. You can now download it from the Scripting/Integration section of the Unity Asset Store.

Introduction to Unity Part 2: Learning C#

- Jesse Freeman (@jessefreeman)

 

Want the latest?

appstore topics

Recent Posts

Archive