Irenic is an HTML5 game engine made by Bane.
Current state: In development, usable.
For now, planned features include:
- A loader
- Animation framework
- 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)
- 3D and 2D sound
- Input handling
- 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:
These are the three fundamental classes of Irenic.
The renderer is responsible for managing the context, and rendering the whole scene through the view of a camera.
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.
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 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.
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.
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.
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).
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.
A very simple class that only inherits from Drawable, but doesn't do anything itself, yet.
A map is a collection of tiles with its own draw method, position and a .tileSize property.
A very simple class that is here to house settings for objects. It only has an .applySettings() method for now.
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.