Apricot.js @apricot-js - Tumblr Blog

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.

#javascript #jsfiddle #jsdo.it #notepad++

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>

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.

#apricot.js

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

#javascript #game development

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>.

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:

//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.

Drawing and Manipulating a Sprite

(Note: If you are reading this, make sure you have already read part1: Creating a Sprite. Also, these tutorials assume a basic understanding of javascript and how to create an HTML5 Canvas.)

The sprite class only has one function you need to know to be able to use it. The draw() function. The draw function takes two arguments only. An x position and a y position. The syntax is:

spriteName.draw(x,y);

So if we were to instantiate a sprite and then draw it at 0,0 we would write:

testSprite = new sprite("sprite.png");

testSprite.draw(0,0);

But drawing an image on screen is easy! We could just use an <img> HTML tag, right? The real reason t use the sprite class is for image manipulation. There are 4 ways we can change how the sprite is drawn on the screen:

xscale: the width of the sprite (1 is the original width, a number less than 1 is smaller, and greater than 1 is wider)

yscale: the height of the sprite (1 is the original height, a number less than 1 is shorter, and greater than 1 is taller)

image_angle: the angle to draw the image at. The image rotates about its origin. (For a description of the origin, see the first tutorial)

image_alpha: A value between 0 and 1 that determines how transparent the image is. 0 is completely transparent, and 1 is solid.

In order to help you better understand these parameters I have created a quick little demo show casing them.

There are two other variables we can change that have to do with animated sprites.

image_speed: This value determines how fast the sprite will animate. It corresponds with how many times each image in the sprite strip should be drawn. A value of one would animate the fastest, and anything more would be slower.

current_frame: The current frame the animation is on. You can change this if you want to display a certain part of the animation

(Demo coming soon)

To change any of these parameters simply type something like this:

spriteName.parameter = newValue;

Putting it all together, we can create a sprite, manipulate it, and then draw it. An example of drawing a scaled and semi transparent sprite would be:

testSprite = new sprite("sprite.png");

testSprite.xscale = 2;

testSprite.yscale = 2;

testSprite.image_alpha = 0.5;

testSprite.draw(0,0);

I have submitted the apricot.js engine for review over at IndieDB. IndieDB is one of my favorite indie gaming sites, and I recommend it highly. It allows other developers and fans to give input during the entire design process.

IndieDB

Creating a new sprite

The sprite class makes drawing and manipulating images on an HTML5 Canvas easier than ever. The class can even handle animated sprites. Simply instantiate the sprite by creating a new sprite object. The syntax for this is:

testSprite = new sprite("spriteURL",animationFrames,Xorgin,Yorgin);

Only the first argument is required. If the others are left blank the framework will assume that the sprite is a static image (not animated) and that the orgin is at the top left corner of the image.

spriteUrl: The sprite or sprite strips's URL or a javascript Image object containing the image. A sprite strip is every frame of the animation put in the same image horizontally. An example would be a simple walking animation like the following:

animationFrames: The number of images in the sprite strip. For the above image this argument would be 9. The framework assumes the images are all the same size and spaced evenly apart.

Xorgin, Yorgin: The X,Y position on the image that the rest of the image is drawn relative to. This is especially important when dealing with rotating sprites. I have tried to make this as clear as possible in the following picture:

This is not all the sprite class can do though. You can also manipulate the image's transparency, scale, animation speeds, rotation, and more. I look forward to releasing the sprite class in the next couple of days!

#javascript #sprite #game development

OOP in Javascript

The most useful reference for object oriented programming in javascript I have found so far. Detailed descriptions and tips for using public/private/privileged methods and variables. A great page to have bookmarked.

Summary

private variables are declared with the 'var' keyword inside the object, and can only be accessed by private functions and privileged methods.

private functions are declared inline inside the object's constructor (or alternatively may be defined via var functionName=function(){...}) and may only be called by privileged methods (including the object's constructor).

privileged methods are declared with this.methodName=function(){...} and may invoked by code external to the object.

public properties are declared with this.variableName and may be read/written from outside the object.

public methods are defined by Classname.prototype.methodName = function(){...} and may be called from outside the object.

prototype properties are defined by Classname.prototype.propertyName = someValue

static properties are defined by Classname.propertyName = someValue

Complete Source:http://phrogz.net/js/classes/OOPinJS.html

#javascript #OOP

Favorite Line of Code Ever

varName = typeof( varName ) != 'undefined' ? varName:0;

Basically allows you to set a variable if it hasn't been set before. I use it for optional arguments in javascript functions. If the variable is defined, it does nothing. If it is not defined it sets the variable to whatever value you'd like.

#javascript

Hello Good People

Welcome to the apricot juice (js=juice) development blog. Apricot.js will be an opensource HTML5/javascript game making framework currently being developed by The Accord independent game development team. The apricot acronym stands for A Powerful Rendering Interface Consisting of Typing. This acronym was thought up after the name was chosen and may or may not be incorrect.

The Accord team consists of four young and handsome developers. First is hunter, our resident designer, modeler, writer, and cartographer. Next I would like to introduce myself, my name is Zach and I am the coder, mathematician and Sith lord on the side. Nathan is a slave to fashion who we put in charge of testing, balance, and level design. Jeremiah rounds out the team as the art director and leader of elvish relations.

Currently the team is developing the engine by building a couple simple games. As we complete the different classes we will upload them here. The first one is the sprite class. This javascript class will allow the user to easily manipulate and draw images on the HTML5 canvas.

#Greeting

Trending Blogs

Recently Viewed Blogs

Apricot.js