Irenic
Irenic is an HTML5 game engine made by Bane.
Here's the GitHub repository. Everybody is free to email me (yannbane@gmail.com) and join the development team. Knowledge of Javascript is required. Here is the tutorial: http://www.yannbane.com/2012/09/irenic-tutorial.html. Irenic is licensed under the MIT License, it is free software, you may do whatever you want with it.
Current state: In development, usable.
Contents |
Features
For now, planned features include:
- A loader
- Animation framework
- Picture
- Animation
- Composition
- State
- Particle system
- Scene, Camera and Renderer management
- Tile-based map support
- 3D lights (which means that they are in 3D space, but the effects are still 2D)
- GUI
- 3D and 2D sound
- Input handling
- Math
- addVectors(Array)
- Vector2D
- Vector3D
- Polygon
- etc
- Sound and music player
- Various utilities
I will probably not implement the physics by myself, but will try to keep compatible with available physics engines, such as Box2D.
Browser behavior changes
Irenic performs some changes and enhancements on the typical browser behavior, some of these are:
- Fixes requestAnimationFrame like this, but the naming stays the same (window.requestAnimationFrame)
- Overwrites setTimeout and setInterval to give more freedom and information to the user (namely Irenic.TC and Irenic.IC, which tell you how many intervals and timeouts are currently active)
Explanation of classes and core features
Please note that this isn't the actual documentation, which can be found here: Irenic API. Irenic is composed out of six main class groups:
Core
These are the three fundamental classes of Irenic.
Renderer
The renderer is responsible for managing the context, and rendering the whole scene through the view of a camera.
Scene (class)
The scene is a collection of all the scene objects (instances of Drawable, Tile, Map, ParticleEmitter, etc) which are about to be drawn in the next frame. By current design, the scene is split up in layers. Why? Because there needs to be some control over which objects get drawn over the others. Basically, top layers get drawn last, and will be drawn over anything that is in the layers below them. For example, one would put the map in the layer 0, all the players in layer 1, and all the objects in layer 2. That way, we can see that both the players and the objects are on the map. Also, the objects get drawn over the players.
Camera
Out of all the core classes, the camera one is the simplest. The most important property it has is it's position, an instance of the Vector2D class. It has some methods that allow you to attach it to one object.
The camera's position doesn't represent the upper-right corner of the screen, though, but the center. If there was an object at [0, 0], and if the camera was there as well, the object would be drawn in the center of the screen.
Picture (class group)
Picture classes are an important part of the Irenic animation framework. Any object that gets fed to a scene must have a .picture property, which contains an instance of one of the Picture classes.
Picture (class)
Picture is the most basic of Picture classes. It is essentially a wrapper for an HTML image object (img = new Image();), that adds some functionality to it:
- draw method
- alpha property
- phi property (in radii, for rotation)
- width, heigh
- r (a radius of the image, useful for simple collisions, r = sqrt(picture.width*picture.width + picture.height*picture.height)/2)
The actual image is stored in an .image property.
Animation
An Irenic animation is very similar to the Picture class. Almost identical, actually, as instead of having an .image property, it has an array called "images", which stored multiple HTML image objects. It also has an alpha, a phi, width, height, r, but also an .FPS property to determine how many frames per second will the animation be changing.
Composition
This is where thing get a bit interesting. The composition is actually a collection of multiple Picture classes, which all get drawn on top of each other. Each of these elements (contained in an array called .elements) can be another composition, picture, animation, or a state (later). This allows for very flexible animating techniques.
State
The state is very similar to the composition, but instead of drawing all the elements at the same time, it only draws the current element. These elements can be, as well, other animations, pictures, compositions or states. This feature is achieved by .next() and .prev() methods.
Drawables (class group)
These so called scene classes are the ones that can be put into a scene, via scene.add(object).
Drawable
This is the base class for every visible object in a scene. It's most important property is the .picture one, which contains an instance of one of the picture classes (Scene, Animation, Composition, State). A drawable also has:
- A position vector.
- A shape polygon (if none is supplied, a simple rectangle is generated based on the image. Used for lighting effects.)
- A radius (useful for simple physics, calculated from the image).
Note that a drawable doesn't have its own draw method, use picture.draw instead.
Tile
A very simple class that only inherits from Drawable, but doesn't do anything itself, yet.
Map
A map is a collection of tiles with its own draw method, position and a .tileSize property.
ParticleEmitter
Under construction.
Utility
Settings
A very simple class that is here to house settings for objects. It only has an .applySettings() method for now.
Update
Actually, two classes. One is called Update, the other is UpdateHandler. When an object needs more than one update, use the UpdateHandler and .add(update)s to it.
