A Powerful Rendering Interface Consisting Of Typing

pretty dope js stuff

JS 13K Games

JS13k is a web technology game making competition. The catch? You have to keep your entire game under 13kilobytes. This is great for people who really want to get down to the lower levels of game engine programming.

http://js13kgames.com/

https://twitter.com/js13kGames

JSDO.IT 

jsdo.it (one of my favorite javascript websites) has had some major changes for the better. They now have their own html5 game portal! I am working to get apricot.js on it right now.

http://games.jsdo.it/

collision_with( “type” )

Returns true if the current object is colliding with another object of type “type”. Used in collision checking.

Example Code:

if (this.collision_with(“wall”)===true) //if object is hitting a wall object

this.set_speed(0); //stop moving

JavaScript Development Tools

Here are some great javascript/html5 developer resources

http://jsfiddle.net/

Triptych calls JsFiddle  an amazing tool that is accessible anywhere via a browser. It allows you to rapidly create demos, examples, bugs, and many other web-based applications and sites.

http://jsdo.it/

I like this one a bit more than jsfiddle because of the full page code editor and the community based environment. According to the official webpage jsdo.it offers both, a vivid environmental for developers to showcase their trendy works on JavaScript and HTML5, as well as community to share their codes and learn form each other.

Google Chrome Debugger

This is the most valuable tool I have found for hunting down and killing that one little glitch.

http://notepad-plus-plus.org/

IF you would rather that all of your development files not be posted to the internet this is the editor for you. It is fast, has syntax highlighting for tons of languages, autocomplete, tabs, and much more. My favorite tool.

Objects

Note: this is the fifth part of the apricot.js tutorial. Please refer to the sidebar for the previous tutorials.

Creating an Object

                Now comes the fun part of game development: creating the in game entities. These objects are event driven, which means when certain things happen to them they respond is whatever you tell them to. Examples of events include: being created, colliding with something, and alarm going off, or being clicked on. Alright, let’s get down to the code. Before we can put an object in our game we must tell the framework what we want the object to behave like. To do this we rely on inheriting the apricot object class. I’m going to stop talking now and show you the code, and then I will explain it afterward.

function test(){}

test.prototype = new obj(“type”);

Alright, so what this chunk does is instantiate a new object called test (in line 1). Line 2 then tells the browser that we want the test object to have all the methods and members of the obj class. This will allow us to use all of the functions included in the obj class on our new object. Finally, the word “type” in the parenthesis is what type of object we want to make. This is mostly used for doing things to all of one kind of object, or checking collisions with a certain kind of object. Basically, the framework will treat all objects of the same type. This would be useful, for instance, if you have a bunch of different color and shape walls, but they all interact with the player in the exact same way, you might want to give them all the same type, even if they are different objects.

The next topic is creating events. We define the events with the following syntax:

      objectName.prototype.eventName = function() {

            //code goes here

};

Let’s use the create event as a sample. We made a test object earlier, but when an object is created it has an empty sprite. We can use the create event to give it a sprite.

                test.prototype.create = function(){

            this.sprite=new sprite(“image.png”);

      };

This code tells the framework to create a new sprite and assign it as this object’s image whenever this particular entity is created.

Remember! Place the image.png file in the same directory as your .html file and apricot.js.

Note: This uses the “this.sprite” property of the object class, which we have not talked about yet. The object class contains a lot of properties you can change, and the sprite property is one of them. The important thing to understand is that whatever you assign to this.sprite will be drawn when the object is drawn.

Now we can put together everything we have learned and begin to make our game. As of now your code should look like this:

<html>

      <head>

            <script language=”JavaScript” SRC=”apricot.js”></script>

            <script type=”text/javascript”>

 

            window.onload = gameStart;

            function gameStart() {

                  apricotInit(“can”, 300, 300);

                  setInterval(gameLoop, 1000/30);

            }

 

            function gameLoop(){

                  //code here

            }

           

            function test(){}

            test.prototype = new obj(“test”);

            test.prototype.create = function(){

                  this.sprite=new sprite(“image.png”,1);

            };

            </script>

      </head>

      <body>

            <canvas id=”can”>your browser is too lame for canvas!</canvas>

      </body>

</html>

Right now opening this in a browser should not do anything. This is because we have not added any instances of our test object to the game world. To add one of our test objects we need to use the new_obj() function included in apricot.js. The syntax is as follows:

                new_obj(new objectToAdd(), x, y);

The first argument is what new object we want to add to the game. The next arguments are where we want to the object positioned. So to add our object we would simply replace the objectToAdd part with our objects name (In this case “test”) and replace x and y with the desired position. This code would go wherever you wanted to create the object, in pour case, this would be in the gameStart() function after we initialized the apricot engine.

new_obj(new test(), 150,150); //place a new test object at (150,150)

The final thing we should do before running the game is deal with gameLoop function. Right now nothing happens in this function. We want it to update the game and draw all the objects to the screen. To do this we call the draw() and update() functions. Change the gameLoop function to look like this:

      function gameLoop(){

            update();

            draw();

      }

This tells apricot to update all of the objects and then draw them to the screen.

Tada! You now have everything you need to begin! If you open this file in a web browser it should display your object in the center of the screen.

Here ya go

Wow, school hit me hard. I have finally got most of the engine done. I am sorry for not having the documentation ready, but I will be working on it tirelessly!

http://dl.dropbox.com/u/10134201/apricot.js

Great wits are sure to madness near allied, And thin partitions do their bounds divide

—John Dryden 

Objects!

Alright guys, I have completed work on the main chunk of the engine. I am almost ready to release the object class. It includes movement, pathfinding, rotated collision checking, drawing functions, game management functions and much more. With the object class you will be able to start making actual games. The problem is, it is huge. There are at least 30 functions to write about. So I will release it within the next week, but the tutorials might be a bit slower in coming.

Creating a Game Loop

In order to create a game you need to continuously update the objects in the game as well as the draw their new positions. To do this we need to introduce the game loop. We can do this with javascript’s built in setInterval() function. We can modify our code from the previous tutorial to start calling a game loop function. The code will look like this:

window.onload = gameStart;

function gameStart() {

apricotInit(“can”, 300, 300);

setInterval(gameLoop, 1000/30);

}

function gameLoop(){

//the code in gameLoop

}

This chunk of code tells the computer to initialize the apricot.js framework and then start repeating the gameLoop function 30 times a second. (For more information on the setInterval() function please refer here)

FULL CODE

tumblrbot asked: ROBOTS OR DINOSAURS?

As a computer engineer I must answer yes.

Creating a Canvas

While writing the sprite tutorials I realized that I probably needed to write one about how to set up the canvas to begin with. The first thing you must do is open up a text editor (like notepad) and save the file with a “.html” extension. To do this change the Save as Type: drop down to “All Files”. save the file in the same folder with the apricot.js file.

Alright, now lets get down to the HTML. Start the file with the <html> tag and head and body section.

<html>

<head>

</head>

<body>

</body>

</html>

Now we need to include the apricot framework, do this with a script tag between <head> and </head>.

<script language=”JavaScript” SRC=”apricot.js”></script>

Now we need to create the canvas we are going to play the game on. This is done with the canvas tag in the body section. Make sure to give your canvas an id so apricot can figure out what to draw to. If you include text in between the two canvas tags it will only display that text if the user’s browser does not support the canvas element.

<canvas id=”canID”>your browser is too lame for canvas!</canvas>

Now that we have a canvas we need to initialize it with a wee bit of javascript code. In the head section, right after the script tag write out another script tag that looks like this:

<script type=”text/javascript”>

//initializes apricot.js

window.onload = gameStart;

function gameStart(){

apricotInit(“can”, 300, 300);

}

</script>

The apricotInit() function requires you to type in the canvas id (in quotes) and the desired width and height of the canvas(the 300s). The other part of the code just makes sure that the canvas has already been created before you call the initialization script. There you go! You are ready to start game programming! If you open the html file in your web browser you will not see anything, but all of the groundwork has been laid. To actually draw things to the screen check out the sprite tutorials.

To see the entire code, click here.