Thursday, May 8, 2014

Workshops

Here is a list of all the available workshops, new workshops will be added weekly.

You can also try using the Problem Solving Method to do the workshops


Visuals Workshops
Logic Workshops
Structure Workshops
Audio Workshops
Input Workshops

Remember that when you finish a workshop you can send me the files and I will post your updated badge as well as any screenshots you might want to share. The best part of this blog will be seeing how different everyone is, and how creative they can be.


Wednesday, May 7, 2014

Logic Workshop: Level 1- Timer

Think of logic as a brick, it is not too big, it is very "simple" yet, with a brick you can do things like this:



Games are just a big pile of IF->Then statements

What is an IF->Then Statement?
Let me show you with an example, think of a soccer ball, if it is at the left side of the screen, then the field is blue, but if it is at the right side of the screen, the field is red.

how would that simple statement look in code?

if(ball is after Middle)
{
    make field color blue
}
else
{
   make field color red
}



Now this is not the real code, if you put this on the computer it will ask you to please identify many things.

for example the computer doesn't know what "is after" means, so instead we use a symbol

>

This is the greater than symbol, 
other symbols are less than, equal to, greater than or equal, less than or equal. Try and search for what those look like.


Another thing the computer won't know is what middle is, there are two options here, one is creating a variable called Middle and giving it a number, or the other is to just put a number here.

Also notice that we just had "ball" > Middle, but ball is not a number, ball is an object, what we need is to know the ball x position on screen. (x is horizontal position, y is vertical position, the top left corner is x=0 y=0 and the bottom right is x=550 y = 400)

so in this case we want the ball.x to be > 275

now the last part is the changing of the color. what you need to do now, is have a movie clip called field with two frames (don't worry you don't need to know about frames for this workshop), so what we do is tell the object field to go to a certain frame (or color).

here is what the final code would look like:

now here is how that looks:



For this work shop I want you to make a timer go down. Let it start at 100 and every frame it needs to go down by one.

you can use the trace function to show the timer going down.

when the timer reaches 0 it should stop, it should not get to -1.


Extra credit:


  1. Make the time show up on screen by using Dynamic Text Fields

Once again thank you, and good luck on this workshop, I will be very glad to see what you come up with, what solutions you make and what obstacles you overcome.

Remember you can use the Problem Solving Method to facilitate your experience. 

Structure Workshop: Level 1 - Coin

A good structure is what allows teams to work on separate computers and to understand the game as a whole.

First of all, you must realize that a game is nothing more than a bunch of objects reacting to input, collisions or logic events.

For example, what objects do you think this image has?



Now take a look at this image below, have you ever thought of games like this? just a bunch of objects? You can try and look at one of your favorite games and try and see all the different objects there are.
An image with all the object visuals is called a Sprite sheet.



For the first Structure Workshop, we are going to add a coin to the game. As in almost anything in programming, there are many ways to do things, so it will be interesting to see how you come up with a solution.

Here is a look at what the template folder looks like:


Basically the .fla file has all the visuals of the game.
The swf is the file that you open in browsers to play
the main.as is an object. in this case it is an object that the game calls automatically.

What we need to do is create a new .as file, this time it is going to be a coin.as file.



I will skip a bit over the format, and for now, if you don't want to go in depth, we can skip that part and just do a copy and paste.

This is the basic structure for all objects that will be seen on screen:

package  {

//This is for the computer to know what functions and variables to use.
import flash.display.MovieClip;


//The class name can be anything you want, it could be Coin
public class YourClassName extends MovieClip{


//Variables go here, above all functions
//The name of the variable can also be anything you like.
var exampleVar:int = 0;


//The name of this first function should ALWAYS be exactly the same as the class name,
//it is called the Constructor.
public function YourClassName() {
// constructor code

}

}

}


Now for this workshop you must think of all the variables needed for the coin, like points, and if it is on screen or something, again, there is not just one correct way to code.



Helpful Keywords

Some of the things you might need to search for are:


  • How to create a movieclip in flash
  • How to link a class to a movieClip
  • What variables do MovieClips have (remember that our object "extends" from movieClip, that means it has all the functions and variables a movieClip has).

This is a tough workshop, but I am sure that with some good google skills you will find the answers.

Please make sure to send me your sketches, and ideas on how you solved this workshop.

Remember that you can always use the Problem Solving method to complete the Workshops.

Thanks








Input Workshop: Level 1 - Arrows

The main difference between movies and games is.... Interactivity.

Input is a pillar of video games, since the beginning developers have tried to use all sorts of input devices in order to create new experiences. some examples include the arcade joystick, the two button NES controller, the zap gun, Wii mote, kinect, and many different sorts of devices.

For this track it is important to create an easy to use control system, you always want your players to intuitively learn how the game is controlled.

Our first Workshop is a simple one, Lets try moving the character from left to right by using the arrow keys. There is an example of this on the Problem Solving Method page, but it is still good to see if you can develop it without using that as an example.



Flash a very handy tool, and it works great for testing input.

I am jumping a bit ahead here, but here is a piece of code, I will try to explain it.

public function KeyDown(e:KeyboardEvent)
{
     trace(e.keyCode)
}

Let me explain all the components

  1. public - The other option is making it private.
  2. function - Think of yourself, a variable is the color of your eyes, a function is you jumping.
  3. KeyDown- this is just a name I gave the function it could have been anything, but it is usually good to choose a name that is related to what the code inside does.
  4. e - this is a name of a variable, I could also have chosen any name here.
  5. KeyboardEvent - This is a type, so what I am saying here is that I will have an object name e that has a bunch of variables and functions (the ones inside object KeyboardEvent)
  6. trace - this is a function that will output to the output console a text or a variable you choose.
  7. keyCode - this is a variable located inside the object e, remember that e is a KeyboardEvent the link will show you all the variables and functions that are available

That's it, this is step 1 in our Input Game Dev Workshop, please make sure to send me a screenshot of your completed file, or if you want to share some of the Sketches that would be great as well. Once I get the image I will try and post your updated Badge as soon as possible.






Tuesday, May 6, 2014

Template Flash File

For those of you that want a little push start, here is a Template flash file, you will require Flash CC in order to open it.

here is what it looks like:




If you don't have flash you can download a trial version here

The .fla file is your visual work file, it contains the mario object. when you add backgrounds, enemies, coins and any other objects you add them here.

The .swf is a file generated by flash that you can use to upload your game on the web.

The main.as is a file that contains code, you put your input and main logic in here.


Remember that in order to complete the workshops you DON'T need flash, you can use any software you like, I just like using flash, but the concepts are all the same, no matter what you use.

Audio Workshops: Level 1 - Song

We all love a good theme song, and it is amazing how much difference a game makes with or without sound.

here is a little video that goes over some cool theme songs:





Now I hope this gives you some ideas for the song you want to choose, or maybe even compose if you have some experience making music.

As always, you can use the Problem Solving Method to guide you.

If you need the Template Flash File, you can Click here


This is it, Level 1 of the Audio Workshops.. Feel free to share your final song, with all of us, and if you want, maybe some of the thought process behind the choosing of the song. I will be glad to post it on the blog, and give you your updated Badge.


Visual Workshops: Level 1 - Backgrounds

Graphics are the Cover of video games. It is unfortunate to say, but the truth is that a lot of players will be driven to try a game only by looking at their visuals.

In this path we will try and make our game look pretty. Don't worry if you haven't done any of the other level 1 workshops, you can use this template file as your starting point.

How about we start by placing a nice background on the game....

If you haven't downloaded the template and you will use flash, click here to download it

Here are just a few backgrounds for you to reference...











What are some of the backgrounds you like from videogames?

for our game, the background is Width: 550 and Height:400

Maybe if you have the skills, you can use photoshop, or flash to create your own background, or try and get one online and place it on the screen.

You can use the Problem Solving Method to help you organize your ideas and plan your development..


In order to place a background on the screen we must first know how flash displays images. 



As you may notice, flash deals with layers, so the layer that is higher on the list will show on top of all the objects below it.


Here is how to create your own layer..


That's it, this is step 1 in our Game Dev Workshop, please make sure to send me a screenshot of your completed file, or if you want to share some of the Sketches that would be great as well. Once I get the image I will try and post your updated Badge as soon as possible.



IGDW Poblem Solving Method

Here is the key lesson of the workshop, This blog is not about teaching you all the details about game development, I want to introduce you to a new way of thinking, a new way to problem solve, a new way to find solutions.

It is impossible to know everything there is to know about programming, and why should you? Before you had  to know as much as possible because if you didn't, you had to look inside a book for a long time or call a friend. But now, now we have Google (or your favorite search engine).

What I want you to know, to understand is that all the knowledge is out there. Thousands of people around the web have shared their experiences, their knowledge, all you have to do, is grab it. apply it and move on to the next challenge.

The Problem Solving Method consists of 6 easy steps:

1) Draw how you want things to work
2) Identify the variables
3) Schedule your time
4) Define keywords
5) Develop
     5.1) Search for solutions you don't know
     5.2) Track your progress
     5.3) Have fun
6) Test, retest and test some more to make sure you are taking care of all the scenarios.


Let me just go over an example so that you can visualize what I have in mind:

Problem: Make box move from side to side by pressing the arrow keys

1) First step is to illustrate what I want to do, how I want it to work, sketches are fine here, anyone with more artistic talent can do different  things, or maybe if you like videos, make a video moving pieces with your hands. or act it out, choose what ever method works for you.








2)As you can see above, I identified that I need:

  1. Character Object
  2. Speed
  3. Left Key
  4. Right Key
  5. Left Limit
  6. Right Limit
3) Here are time estimates I made for myself for the following tasks. These times vary for everyone, it is good to start doing this so that you can learn more about yourself, learn how to estimate your workload, It is a very handy skill in freelancing. 


4) What possible keywords can be used to solve problems?
  • Actionscript
  • AS3
  • Flash
  • Keyinput
  • Left Arrow KeyCode
  • Right Arrow KeyCode
5) Now lets get down to the development! 

Here is a look of my beautiful box on screen..


For demonstration purposes, lets search for key input in flash:


Here is the best example I found:

Now I need to know what is right arrow and left arrow... But instead of using google, let me use the trace method, I will just ask flash to tell me the value of the key I am pressing.


Here is the final code...


6) Let's test it out, does it work correctly?









After looking at it, I thought it looked a bit jumpy, so I made some adjustments...





Thank you for your time, I really hope this method works for you, you should know that if you master this method, you can program anything you set your mind to.

Please share any or all of your work with me, I really want to know how you adapt this method to your personality. I will be glad to share work you do here in the blog for other future game devs to see and learn from.

Saturday, May 3, 2014

FAQ

Here is a short list of Frequently Asked Questions, feel free to comment or send me an e-mail with any other questions or comments.

What is Ipudia's Game Dev Workshop (IGDW)?
IGDW is a top down approach to game development. You will not learn all the basics, or understand everything that is going on. But with very limited experience and time you will be able to start accomplishing things and learn about different aspects of game development.

Where can I get the Template Flash File?
You can click here to download it.

I don't have Flash, I can't do the workshops?
Flash is just a tool, the beauty of programming is that it doesn't matter the tool you use, if you understand the concept you will be able to quickly adapt to any language. Feel free to use the Trial version of the software https://creative.adobe.com/products/flash  or use your own software, Unity is also a great tool.

How much experience do I need to do the workshops?
0.. these workshops are meant to give you an introduction to game dev. The goal is to see if you like to do certain things and hopefully guide you in making a decision if you really feel like game dev is your passion and that you want to continue learning about it.

Is there an advanced Workshop?
Not for now, the goal right now is to teach some of the basics and see if people like it.

How much do the Workshops cost?
They are absolutely Free! The beauty of the workshop is that you will notice that the real value in what you learn is all within your own effort. It is up to you how far you get, I just created a few guidelines and I will be available for some questions that you may have.

Can I upload my work to the Blog?
You are encouraged to share your work, your ideas with the community. The best way to grow is by sharing your work and hearing the comments from your fellow indie developers. Send me your work and ideas so that I upload them.