Wednesday, December 17, 2014

Unity: Save Scene vs. Save Project

When you first start using Unity, you will notice there is a Save Scene and a Save Project option.

#1: Save Scene
As for the Scene well, then your saving the actual scene file. A scene is a level. This is usually what you are working on. Save Scene also saves project settings. Shortcut is CTRL+S.

#2: Save Project
A project has scenes and assets (code, images, sound, etc..). Save project saves settings unrelated to scene, and does NOT save your scene as you may think is logical! You would want to use this if you made changes to your settings and not necessarily your scene and wanted to save them. Or if you made changes to your scene at all and think Unity may crash. Usually not a useful button. No shortcut for this.

Takeaway: either use Save Scene, CTRL+S, or both Save Scene and Save Project.

DO NOT EVER use just Save Project and expect to see you scene again.

Wanna guess how I learned that? :}

Monday, December 15, 2014

What are games made of?

Unity, Construct 2D, and GameMaker are three simple game programs used to create games. Construct 2D and GameMaker are great for beginners to get and intro into how to make games with little to no programming experience. If you have a programming background, I would recommend Unity. Mainly the programming can be done in C#, JavaScript, and more..and the program comes with MonoDevelop, however, if you are familiar with Visual Studio you can get the plugin for it and use that instead (which is more stable). All of the above have a free version that is strong enough for you to get started and make a real fully functional game.

Unreal game engine is a very serious program used by many professional companies, and this one has a free student version you can get from GitHub Student Pack (if you have your student email account!), or you can pay for a subscription which is $15/month.

All you really require is the above to get started. I would recommend finding a youTube tutorial to begin and follow along until you understand how to use the program. Using the program is one of the bigger initial challenges, but if you keep sticking to it you will get it! Starting with 2D will be the best option, even if you only make one to get the controls down before jumping into 3D. A game is made of a scene (platforms, grassy hills, whatever you want), a character (could be in 1st person, an 8 bit character, a cute blob with eyes, anything you like!), and a little purpose! You program in whatever you want.. so let's say running. You would get a set of pictures / model to animate so the character looks like it is running (the front end design portion) and drop it as an asset into your game engine. Then you will add these features to your character. Then, you will access this asset of the player and program in what it is and what it is doing.. and when. So you can say, upon hitting the spacebar.. If you want to make your own 3D models, there is a free program called Blender which does a great job. Also there's the professional 3D Studio Max and Maya which are both used often in game companies and are owned by AutoDesk. These cost a large fortune however, and there is a great debate among which is better, but the general consensus is that are 3 are great programs and it depends on your preference in use. Another option is Cinema 4D which is put out by Maxon. These will all easily make files you can import into Unity (or others) as an asset and you can then manipulate it further there. Adobe Photoshop is a great addition for beginning to make your models before you add serious texture and the 3rd dimension when you import it into your 3D modeling program. There is also a free Photoshop like program called GIMP which works great!

Keep in mind if you would like any form of animation for your character (ex. pistol slide in a 1st person shooter etc..) you will have to sync it up with your programming (shots) and any sound effects (a whole different area to consider!). For the non-artists or sound technicians, there are plenty of free and paid resources out there to get yourself started. The Unity Asset Store has a wide variety of free and paid goodies you can download and import into your game. There are also places like where you can pay someone $5 to make something simple for you like a sprite (sprite: little consecutive pictures of a character like a flip book that show an animation like a "run" or "jump" motion).

Coming from web development, my plan is to start off on Unity with C# and Autodesk Maya. There is a plugin for Visual Studio for Unity which makes my life happy as I have seen MonoDevelop crash on many a poor fellow. I have a history of using Cinema 4D and wanted to make the jump to Autodesk, and I honestly didn't have a preference so just by default chose Maya. I love Photoshop and will use it as needed. And, I will panic when and if I get to the point where I need to add in sounds and animate.. which could be some time. By panic, I mean I will figure it out as I go and probably watch some tutorials :)

While there is a lot that goes into making a game, the same can be said for a website, a house, or anything else! Keep organized! Make a plan and revise as necessary. Most of all, have tons of fun, don't give up, and break things into little tasks. Don't try and take on making an RPG all at once.. start with learning how to make a stage in a 3D program. Then learn how to import it as an asset into a game engine. Then learn how to make a character. Everything seems much more doable one step at a time :D

Wednesday, December 3, 2014

IE8 and Charts JS

A little more than half of users on the internet use IE. Of those who use IE, 23% use IE8. And less than 5% use IE6 and IE7 combined. For the most part, IE8 is still supported and something that has to be taken into account for when making a website.

Charts JS is a great HTML5 chart that can be used for free and adapted to your environment. Charts JS looks great, is very customizable, and is easy to use. It has great support from the community on its GitHub page. Additionally, you can change all of the colors, put them in drag/drop scripts, and use different types of charts (pie, line, bar, radar, polar..)! It works with IE8 if you add in excanvas.js (the correct version of it!).

In your HTML, you should add:

In the JavaScript, you need to refer to this body class and see if it exists. It will only show up if the browser being used is IE8. You can test this out really well using the IE8 developer tools (F12 when on browser, go to emulation, go to Document mode, and change to "8" in the dropdown menu).
var ieeight = $("body").hasClass("ieeight");
var $canvas = $('.canvas.' + this.props.result.ChartName);
var canvas = $canvas[0];

if(ieeight) {
    canvas = G_vmlCanvasManager.initElement(canvas);
    animationBrowser = false;
In order to get this to work properly, I had to add the following JavaScript files to the project:
  • chart.js
  • excanvas.js
  • HTML5Shiv.js
One thing I learned is that if you were to update the chart (for ex. to change dates for the data) you must destroy the old chart first, otherwise you will have a "glitchy" feel when you mouseover and both charts compete to display.
if (this.currentChart) this.currentChart.destroy();
Also, there is a great way to display only some of the x axis values if you follow this edit and implement showXLabels into your script:
if (this.currentChart) this.currentChart.destroy();
You can also force all of the x-axis labels to be horizontal instead of angled (great if your chart has a small space to fit into). The angled x axis labels use a cosine angle to push the label from horizontal to vertical. And when they are vertical, they take up more space and push the chart into becoming smaller (if your chart is constrained into a small space). I did this by taking out the while statement here and making it always false, but you can just comment this out too in Charts.js.
// while ((this.xLabelWidth > xGridWidth && this.xLabelRotation === 0) || (this.xLabelWidth > xGridWidth && this.xLabelRotation <= 90 && this.xLabelRotation > 0)) {
                while (1 === 2) {
                    cosRotation = Math.cos(toRadians(this.xLabelRotation));

                    firstRotated = cosRotation * firstWidth;
                    lastRotated = cosRotation * lastWidth;

                    // We're right aligning the text now.
                    if (firstRotated + this.fontSize / 2 > this.yLabelWidth + 8) {
                        this.xScalePaddingLeft = firstRotated + this.fontSize / 2;
                    this.xScalePaddingRight = this.fontSize / 2;

                    this.xLabelWidth = cosRotation * originalLabelWidth;

And lastly, if you have too many data points.. your chart will select too many points at once causing the labels above the data points to overlap and become illegible. I have posted a temporary solution for that HERE. If you have about a year's worth of data in less than 1000px of width, you will likely need to do something like this solution to improve usability.

Overall, I would like to say thanks to the maker of Charts JS, you did a great job. The community has been extremely helpful with working though making it even better! I highly recommend using it!