The aim with JackyJS was to create a web game engine/framework that has enough essential features to facilitate the rapid development of casual games. I don't know about you but I want to spend less time on the nitty gritty and more time on the creative process; that is, the process of actually coming up with ideas and figuring out how to make them come to life. JackyJS helps you take your game, from idea to screen, quicker.
The following list highlights only the most notable features of the engine; you will find much more as you dive deeper. Further, as the product matures, you can of course expect this list to grow even bigger.
TIP: JackyJS has a lot of very useful features, some of which are NOT found in competing products! :-)
GAME.find(), you can target (and act on) entity instances very easily, as the function searches any combination of properties you specify, including arbitrarily assigned classes. This global function allows you to deal with instances of all types very quickly.
You can add/remove any number of arbitrary classes to an entity, at any time, even during run-time. This is analogous to the way a Web Developer would toggle class names of elements.
JackyJS supports entity inheritance, which means a parent entity can have any level of descendants, with each level inheriting from the one above itself. This means child entities can inherit properties and events, as well as override them.
Typically, entities are destroyed when a new room or scene is generated, but with persistency turned on, an entity will always remain right where it was when a new room is navigated to. This is especially useful for things like a lifebar, score, timer, etc.. basically any items which you do not want to have to create again and again.
Sometimes you don't want all entities to be active all the time. Let's say there is an army of enemy soldiers off-screen waiting to attack the player. There is no sense for the engine to be wasting processing time on these entities. You can handle this by setting an entity's active property to FALSE.
What happens when the game is paused? Do all entities freeze up? If they did, how could you click the pause button to resume playing? You can handle this by toggling an entity's pausable property.
You can pause/unpause any currently active effect or motion. For example, let's say you want to pause the rotating effect for a specific entity and a motion effect for another entity. With JackyJS you can do this, not to mention pause/unpause ALL effects or motion at any time.
Let's say your game has hundreds of objects whose numbers vary from Room to Room. Should the game engine be cycling through ALL those entities all the time? Probably not. JackyJS cycles through active entities for the current Room only! Further, when entities are destroyed, instead of array deletion, they are flagged for deletion and filled in later. I prefer holes in my donuts, not in my arrays.
The code for you're one-screen game is getting a bit unwieldy, and you wished your favorite web game engine supported some sort of level system or scene manager. JackyJS has a concept called Rooms, and it works the way you would expect. The word "Room" in JackyJS is basically a euphemism for scene, level, or stage. Each Room has its own create, start, and update event so that you can manage entities on a Room-by-Room basis instead of all in one pile of code.
What's having Rooms if you don't have Transitions? JackyJS has three Room transitions by default ("fade", "curtain", and "shutter"), but you can make an unlimited amount of your own transitions, very easily. Best of all is each Room can have a totally different Transition effect, and with different timings.
Usually games have background layers, then entities on top, and then maybe a foreground layer. JackyJS also supports this but takes it one step further. Sometimes you might want to have foreground entities that go over top of the foreground layers, no matter what. JackyJS can do this.
The game engine automatically freezes when the user navigates away from the web page. This is to prevent any unnecessary RAM usage, especially where mobile devices like phones and laptops are concerned. Some publishers will explicitly look for this feature in your games. ;-)
When the user clicks on the game it is considered to be in a "focused" state, and thus the page scrolling will be locked. This prevents accidental scrolling of the page if the game has up and down keyboard events, for example. When the user clicks somewhere else on the page the game is considered to be in a "blurred" state and page scrolling is re-enabled. This is an optional setting and only applies when the game is running in "Container" mode, that is, when the game is placed within a page container element (besides the <body>) and not in fullscreen mode.
JackyJS games can run in either Standalone mode, where there is nothing else on the page besides the game, OR Container mode, where the game can be placed inside of any amount of arbitrarily nested container elements. JackyJS automatically handles positioning the game within its parent container, so NO extra effort required there. This is useful because some games are played in context of their website. Lastly, if game scaling is set, the game will stretch responsively (and proportionately) as expected.
When the game is in Container mode, a simple call to the
GAME.fullscreen() function and the game will automatically create a black underlay element, set the game to scaling mode, and resize the game to fullscreen.
JackyJS uses a platform-agnostic method to determine whether the user's device is in portrait or landscape mode. A corresponding event is fired so that you can insert your own code after the event has completed.
This is a useful feature if your revenues are ad-driven. JackyJS uses a clever mechanism to determine if an ad blocker is running in the browser, and if so, sets the global
GAME.hasAdBlock variable. Use this feature judiciously, and display a polite message for your customers.
Some of the most fun games have draggable objects. A simple mechanism but tricky to implement, especially when you want to be able to drag an object from literally where you clicked on it, instead of its center. JackyJS makes this super easy; you just set the draggable property of an entity to TRUE. That's it, instant draggable object!
Remember Flash? It employed a concept called nine-slice-scaling, which was a godsend when it came to dynamically resizing any rectangular graphic with nice corners. Basically, what this means is when you resize this kind of graphic, the only parts that stretch are the parts that connect to the corners; the corners are left in tact. JackyJS makes this easy; you simply provide references to all nine graphics from your spritesheet, and when it comes to creating the Dialog, you just specify its width and height; JackyJS does the rest.
Let's say you want your entity to follow a specific set of coordinate points. Let's say you want it to loop back to the starting point or simply want it to reverse, when it gets to the end point. Let's say you want to execute a piece of code at each point. Let's say the path's points should be relative to itself instead of absolute coordinates. Let's say you want to pause the entity along the Path, or speed it up or slow it down. Yes, JackyJS handles all of that.
Sometimes you want code to execute only at a certain point in time. Take for instance a space shooter where enemies come flying into the screen at exactly the same time every time you play the game. This is where Timelines come in. You may want to pause the Timeline, or loop it when it gets to the end. You may want global Timelines and entity-specific Timelines. It's all there.
Your user just got a high score playing your cool new game. Where does that score go? Facebook, Twitter, database? All of the above? Most modern browsers (and mobile devices) now have what's called localStorage, which works much better than browser cookies for storing user data. This is a great way to store user settings like sound volume, and of course, high scores or game progress. JackyJS handles storing and retrieving complex data objects.
The last thing you want is for your variables and functions to interfere with external ones on a third party website. You never know where a publisher is going to place your game, therefore, proper scoping is paramount. JackyJS has mechanisms in place for your global constants, variables, and functions, all of which can be accessed from anywhere in the game.
What would a game be like without nice particle effects? The problem is that particles can add up quite fast, slowing down your game, thus population control is a necessity. You can easily control how many particles are allowed on screen at a time via
What happens when a user clicks on a dogpile of entities, all with mouse press events? Typically the one underneath would fire due to the order of execution of code, but with event bubbling, only the entity at the top of the pile should fire the event. JackyJS takes care of this so you don't have to.
As any seasoned Web Developer will tell you, web browsers and cache can be a real pain in the butt. Visiting your web page should be all that your customer has to do when playing your game. What happens when you update a bunch of assets, and due to cache control, the browser will not serve up the newest version of a modified file? You shouldn't have to tell your customers to fiddle with their browser's cache settings. Thankfully, JackyJS has got your back; it has a built-in mechanism to ensure that the newest version of all your assets are always loaded.