collinhover / impactplusplus

Impact++ is a collection of additions to ImpactJS with full featured physics, dynamic lighting, UI, abilities, and more.

Impact++ (r7)

###DOCS / DEMO / GENERATOR

####Overview

Expanding the ImpactJS engine by over x10 so you can kick-start your game project into a full featured experience for the web (and mobile!).

Impact++ is stable for ImpactJS v1.20 - v1.23

####Features

• Extended capability of ImpactJS's default classes to improve collisions, animations,...
• ig.CONFIG data driven configuration to allow you to change parameters without rebuilding or modifying the library
• ig.GameExtended game with layers, easy pausing, improved debugger,...
• ig.EntityExtended entities with lots of extra helper functions, opt-in performance, inheritance friendly animations,...
• ig.pathfinding efficient, garbage collector free pathfinding able to avoid entities and let you draw pathfinding maps in the editor
• ig.InputPoint input with multi-touch and gestures that works the same for mouse or touch
• ig.Camera camera for screen control, smooth target transitions, atmospheric overlays,...
• ig.UIElement a whole list of ui element entities to make text, buttons, overlays,...
• ig.Ability abilities that are entirely modular, have a built in casting system, upgrades,...
• ig.EntityLight lighting in real-time with shadows, dynamic alpha and/or color,...
• ig.Character abstract character class with options for moving, jumping, climbing,...
• ig.Creature abstract creature class with simple AI to find targets, move to, attack, use abilities, flee...
• ig.Player abstract player class with built in interaction and input handling,...
• ig.Tutorial abstract tutorial class to help you show your players how to do things
• ig.Spawner abstract spawner class with pooling for better performance
• ig.Particle abstract particle class with fading in and/or out, random velocities,...
• ig.EntityTrigger easy to use set of triggers for complex event driven behavior
• ig.EntityCheckpoint checkpoint for automatic player respawning on death
• ig.utils huge list of utility functions for vectors, drawing, intersections, math, tiles,...
• and too much more to reasonably list here!

####Download

##Getting Started ####Generator Method

1. Use the killer Yeoman Generator put together by @racingcow

####Manual Method

1. Download using one of the "Download" links and extract the files.
2. Copy the impactplusplus/lib/plusplus folder into your new or existing ImpactJS project lib directory.
3. Either copy the impactplusplus/lib/weltmeister/config.js into your projet's lib/weltmeister directory...
4. Or, if you have a custom Weltmeister config:
   • add 'lib/plusplus/entities/*.js' to the entityFiles setting
   • change the collisionTiles.path setting to 'lib/weltmeister/collisiontiles_plusplus_64.png'

Next, make sure you're comfortable with the ImpactJS Documentation. Then load up the Impact++ Jump N' Run demo (see below) to review the basics, and dive into the Impact++ Documentation.

####Demo: Jump N' Run Check out the Jump N' Run demo for an overview of getting started with Impact++, located in the 'examples/jumpnrun' directory. Don't forget to copy the ImpactJS engine and Weltmeister files into the demo directory!

####Demo: SUPER COLLIDER! Check out the SUPER COLLIDER demo for an overview of how to use almost every single feature in Impact++, located in the 'examples/supercollider' directory. Don't forget to copy the ImpactJS engine and Weltmeister files into the demo directory!

##FAQ ####Ejecta, Cocoonjs, etc? Impact++ has been built from day one to be portable / wrappable to iOS, Android, Win8, etc. Tests are ongoing, but the library does nothing that should need special handling when porting or wrapping your game code for distribution as a mobile app. Please let us know if you find any issues!

####Custom Settings // edit the user config file at 'plusplus/config-user.js' // then you can set values // for any of the properties that appear in ig.CONFIG // and they will automatically be merged // over the base settings ig.CONFIG_USER = { // for example, one thing you'll probably want to set right away // is your own logo (in base64) for the loader LOADER_LOGO_SRC_MAIN: 'data:image/png;base64,...' };

####Design Philosophy

• Modularity - code should be reusable whenever possible
• Parametrize - projects should be able to change settings without modifying the library
• Be agnostic - do not rely on device or browser specific functionality
• Consistency - the codebase should look like a cohesive whole
• Document - the codebase should be reasonably documented

####Contributing We'd love it if you want to help make Impact++ better, so if you're interested take a look at CONTRIBUTING.

####License Impact++ is licensed under the MIT license. For full license and information, see LICENSE.

##Changelog Check out the Releases.

impactplusplus's Issues

Entity collisions can rarely teleport one entity a good distance in a random direction.

Unsure what is causing the issue, but it only seems to happen to characters that land at a specific angle or point on top of another character, and both characters must collide. When this happens, the character on top teleports instantly fairly far away, usually in x direction.

jump velocity doubles when adding multiple player entities

I created two different player entities and set player2.controllable = false; player1 is not rendered to the canvas and neither entity is controllable. when setting player2.controllable = true; player 2 is rendered but the speed of movement is doubled for both grounded and ungrounded actions. it appears that multiple player entities cannot be on the same level.

zIndex not working?

So I have two entities, a player and a sword.

Sometimes I need the sword behind the player, so I do:

swordEntity.zIndex = -10;
ig.game.sortEntitiesDeffered();

But it doesn't seem to do anything, what am I missing?

Collisions occurring when one entity has collides never

Appears that the recent collision rework that moved collision solving into entities is allowing collisions between an entity pair where one has collides never and the other is collides active or fixed. The check for collides never was removed incorrectly.

UIInteractive - activate method not working with Ejecta

I am writing my code like this:

{

ig.UIButton = ig.UIInteractive.extend({

animSheet: new ig.AnimationSheet( 'media/shared/button_help.png', 52, 46 ),
animSettings: true,

activate: function ( entity ) {
    this.parent();
    console.log('*');
    // nothing happens when i click (touch) the button...
},

alwaysToggleActivate: true

});

MyGame = ig.GameExtended.extend({

init: function() {
    this.parent();

    var btn = this.spawnEntity(ig.UIButton,  10, (ig.system.height - 46 - 10));
},

update: function() {
    this.parent();

    ig.game.pause();
},

draw: function() {
    this.parent();
}

});

}

When i run this code on Ejecta and i click (touch) the button, nothing happens... I don't know if i am using it the wrong way or if it's not working properly... :)

Creature docs not generated properly

Creature docs are blank, most likely caused by a typo.

Debug maps panel does not show background maps when it should.

Debug panels just needs an update to gather the maps correctly from the layers.

collision box, offset and angle/rotation

So, I have a sword entity. Which has a size of 3x10. The sword itself is 3x10 (the animationSheet)

But when I rotate the entity, the collision box is not rotated nor is it sized up to accommodate.

What should I do?

Not all entities die silently as expected.

Looks like some entity classes ignore the silent parameters, and this is causing issues where they do not die silently when they should.

Function `shapesFromCollisionMap` fails to produce hollow rectangles.

Test Case:

// main.js
ig.module('game.main')
.requires(
    'plusplus.helpers.utilstile',
    'impact.game'
)
.defines(function(){
    MyGame = ig.Game.extend({
        init: function() {
            var data = [
                [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
            ];
            var tilesize = 8;
            var collisionMap = new ig.CollisionMap(tilesize, data);
            var shapes = ig.utilstile.shapesFromCollisionMap(collisionMap);
            var solids = shapes.solids;
            for(var i=0; i<solids.length; i++) {
                var vertices = solids[i].settings.vertices;
                console.log(JSON.stringify(vertices));
            }
        }
    });
    ig.main( '#canvas', MyGame, 60, 320, 240, 2 );
});

Expected Output:
4 rectangles (1 top, 1 bottom, 1 left, and 1 right) which altogether form a hollow square.

Actual Output:
1 solid square, filled in where it should be hollow (screenshot).

[{"x":-56,"y":56},{"x":-56,"y":-56},{"x":56,"y":-56},{"x":56,"y":56}] 

Note:
This test case was done September 23, 2013 using the current dev branch.

Did the character initiate a jump?

I have a player entity that extends the impact++ playerEntity and I need to play a sound when the character initiates a jump.

I couldn't find a way to easily check whether he initiated a jump or not.

The only thing I have is the jumping property but that property stays true for the entirety of the jump.

I think the jump method on the playerEntity class should return true or false when initiating a jump, such that I can do :

jump: function() {
    if (this.parent()) {
        this.sound.jump.play();
    }
}

I have never issued a pull request before though so don't know how to do that :P

Remove 'control' on entity but let it be moved by other factors other than its own will?

So, i have an entity extending ig.Character and it has a stun method.

So when I stun it, I removeControl() on it, then addControl() after a while. But he freezes. He should still fall because of gravity and other factors etc. He should just not be able to do anything on its own.

Is there a way to remove 'movement' control on it only and still let it update?

Event system?

So I'm writing a more complex AI system than I previously had.

I saw some stuff in the ++ code about 'signals'?
Is this an event system?

Anyway, what I want is to 'listen' or 'bind' to the ig.Character.moveToComplete method without overriding the method.

Is there a way to do so, and if not. I might look into writing an event system.. actually I think I already have a JS event system which I can hook into ++ easily.

Spawners are not positioning spawned entities correctly

It appears that after a spawner spawns an entity, it is waiting for an onAdded signal that doesn't happen. I don't think the spawner needs to wait for this, it should be able to finish the spawn immediately.

Pathfinding and slopes == bug?

It seems to me that one of my Characters are unable to jump up to a slope.
If I change that slope to a regular square block, it works fine. He jumps up.

Camera transition causing jittery post transition movement.

Camera transition can cause camera to slowly jitter in direction of transition after transition completes.

Triggers should chain to other triggers.

Currently, triggers will only activate their targets. If one of these targets is a trigger, activating it will not trigger it, which stops the trigger chain. Triggers should chain to each other, but they should not chain infinitely.

Locking the camera inside the level

Currently there is no feature to lock the camera to the level. This is especially useful for top-down games, where getting to the edge of a level currently results into big black borders around the level.

EntityText not working?

I'm trying to spawn a EntityText using the following but it's not working...

ig.game.spawnEntity(EntityText, x, y, {
    text: 'hello',
});

I have tried setting the 'textDisplayed' property too to no avail.

What's going on?

Ability casting effect sometimes does not get removed properly

Seems that reusing the ability cast effect entity is causing problems where the entity gets added after it was killed, causing it to remain in the game and not be removed properly.

AudioSource & AudioListener

I wanted to have certain sounds in the game sound as though they are further away, so I implemented two classes, ig.AudioSource and ig.AudioListener.

I could add this to plusplus and submit a pull request?

Consider a crate that plays a 'break' sound.

EntityCrate = ig.global.EntityCrate = ig.EntityExtended.extend({
    init: function() {
        this.audio = new ig.AudioSource();
        this.audio.sounds.break = new ig.Sound('path/to/sound.*');
        this.audio.suonds.break.volume = 0.5;
    },

    update: function() {
        this.parent();
        this.audio.pos.x = this.pos.x;
        this.audio.pos.y = this.pos.y;
    },

    break: function() {        
        //play sound
        this.audio.pos.x = this.pos.x;
        this.audio.pos.y = this.pos.y;
        this.audio.break.play();
    }
});

Now, you probably want to have the AudioListener at the camera's position.
So, in your game's init function:

init: function() {
    this.audiolistener = new ig.AudioListener();
},

update: function() {
    //update the position of the audiolistener
    this.audiolistener.pos.x = this.camera.pos.x;
    this.audiolistener.pos.y = this.camera.pos.y;
},

Notes

*You can still play sounds outside the context of the game world by simply playing ig.Sounds (not via an AudioSource object) for this like UI.
*You can set the radius of an AudioSource which determines how far away its sound will be heard.
*All sound objects still have a functional volume level. This is taken into account.
*I also have other improvements on the Sound class which allows for easy looping (via pause(), unPause() and continue() methods)
*I am investigating making use of the new WebAudio API to try and create panning for directional sound.

Moving a UIElement

Hi,

I'm a little unclear on how you move an UIElement, so here is my code

if(ig.input.pressed('popup')){
this.someEl = ig.game.spawnEntity(ig.UITextBox, 0, 0, {posPct: {x: 0, y: 0}, text: 'Hello!!!!!'});
this.someEl.moveToPosition({x: 100, y: 100});
}

is that the proper way to do that or am I missing a concept here because no matter what it always places it in the top left corner of the game window.

Camera stops following after new level load.

@bdaenen mentioned in #32 that the camera stops following the player after level load. Unsure as to why this might be happening, but looking into it now.

BackgroundMap repeat make some bugs

Whena i set a background of 1x32 @32 with repeat property, i have this problem:

• camera jumps
• Background does not repeat well

When turning of repeat, all is fine.

How much 'light' or 'shadow' is there "here"?

I'd like to know how I could query impact++ to find out how much light there is in a certain x, y position.

Doing a stealth game :P

Nothing ever collides

It looks like when refactoring to move ig.Entity.COLLIDES to ig.EntityExtended.COLLIDES, something was forgotten and now nothing collides.

Player trying to create ability interact when does not require module first

Looks like an error caused by refactoring, I left the require for ig.AbilityInteract in my own game's player instead of Impact++'s player.

Pathfinding broken?

I have an entity that should find it's path to a point in another room. It can only get there by climbing a ladder, which it does, but it doesn't go up all the way. Instead, it tries to move right into the platform it should be walking on.

This is the situation:

The entity basically gets stuck in that position, endlessly moving up and down a tiny bit.

Creature Y Size and Wandering

Creatures with size Y greater than 16 seem to stop wandering. This can be replicated in the demo by changing the spike to have a size Y greater than 16.

I'm trying to look down in the creature wandering blocks to see what is causing this. I should note this is in the DEV branch

ig.game.getEntitiesByClass forces area boundary

Hi, @collinhover. I think I may have discovered a bug, or at least a change in behavior that I don't quite know how to handle yet.

Since the new code on lines 1697-1705 of game.js was introduced in this commit, it looks like the behavior of ig.game.getEntitiesByClass has changed.

I used to be able to do something like this to get the first entity of type (class name, not type from plusplus type system) EntityClaribel...

var firstMatching = ig.game.getEntitiesByClass('EntityClaribel')[0];

...but after the change, it seems that I have to either send in settings for distanceSquared/from, or minX, minY, maxX, and maxY. If I don't, ig.game.getEntitiesByClass returns an empty array, and firstMatching from the code above is undefined.

If I try something like...

var matching = ig.game.getEntitiesByClass('EntityClaribel', { 
    distanceSquared: 100000,
    from: {x: 0, y: 0}
});
var firstMatching = matching[0];

... I get the entity I am looking for, but then in my specific case, the camera won't follow the main player (not sure why this happens yet).

Is this a bug, or am I just missing something?

EntityPlayer Regen properties are not persisting across player respawns

When an EntityPlayer dies and is respawned at a Checkpoint, the Regen properties are no longer in effect. The same effect is seen when Regen properties are set on a Player, then a new level is loaded via ig.loadLevelDeferred(). Once the new level is loaded, the regen is no longer active.

ig.utilsvector2.pointsToConvexHull breaking in rare cases

Error and sample code provided by @Joncom:

var vertices = [{"x":-20,"y":28},{"x":-20,"y":20},{"x":-28,"y":20},{"x":-28,"y":12},{"x":-36,"y":12},{"x":-36,"y":4},{"x":-44,"y":4},{"x":-44,"y":-4},{"x":-52,"y":-4},{"x":-52,"y":-12},{"x":-84,"y":-12},{"x":-84,"y":-28},{"x":-52,"y":-28},{"x":-12,"y":12},{"x":12,"y":12},{"x":52,"y":-28},{"x":84,"y":-28},{"x":84,"y":-12},{"x":52,"y":-12},{"x":52,"y":-4},{"x":44,"y":-4},{"x":44,"y":4},{"x":36,"y":4},{"x":36,"y":12},{"x":28,"y":12},{"x":28,"y":20},{"x":20,"y":20},{"x":20,"y":28}];
ig.utilsvector2.pointsToConvexHull(vertices);

Possibility to set margins on the canvas?

I wanted my canvas to be fullscreen (GAME_WIDTH_PCT = 1 & GAME_WIDTH_PCT = 1) but leave space for a 200px sidebar. For it, I added these to config-user.js:

"GAME_WIDTH_MARGIN": 200,
"GAME_HEIGHT_MARGIN": 0,

and edited core/game.js resize function:

var width = _c.GAME_WIDTH_PCT ? ig.global.innerWidth * _c.GAME_WIDTH_PCT - _c.GAME_WIDTH_MARGIN : _c.GAME_WIDTH;
var height = _c.GAME_HEIGHT_PCT ? ig.global.innerHeight * _c.GAME_HEIGHT_PCT - _c.GAME_HEIGHT_MARGIN : _c.GAME_HEIGHT;

I think this would be a good addition to Impact++ itself. Didn't make a pull request at least yet because I wasn't sure if you'd want this in.

AUTO_FOLLOW_PLAYER setting requires Player object to be named "player"?

It looks like the Camera class requires that a player is named "player" in order for the camera to follow properly.

In my case, I have several players, each named something other than "player". Would it make sense to fallback to searching by class name/type/group, similar to the way that creature.findPredatorPrey does?

I can send a PR if it makes sense and you'd like me to.

UIMeter attempts to display nonexistent animation frame

I was making a health meter today, and I think I may have stumbled onto a bug. It looks like UIMeter will try and show an animation frame that is outside the bounds of the animSettings array.

In my case, I have created a UIMeterHealth class that extends ig.UIMeter. My meter references a sprite sheet that contains 12 images, each of 32x32px (3 across and 4 down), and has animSettings like so...

animSettings: {
    main: {
        sequence: [0,1,2,3,4,5,6,7,8,9,10,11]
    }
}

On the UIMeter.draw method (line 374), it calculates the current frame based on the length of the animation sequence and this.value. The value can range from 0 to 1, inclusive. Whenever it is anything from 0 to 12 - 1 = 11, everything is fine. When it nears the max health of the player, however, this.value becomes 1, and frame gets set to 12, which is outside of the bounds of the array.

Adding this line seemed to fix it for me. Let me know if a PR would help and I can send one.

if (frame == this.currentAnim.sequence.length) frame--;

Loading and changing to a new level does not properly clear all entities from last.

Looks like at least the player entity from the previous level is sticking around after swapping to a new level. This is causing issues with abilities trying to refer to the old player entity and not the new.

Level editor does not integrate user config.

When using Weltmeister, user config is not merged into Impact++ config, which causes problems with entity placement when using offsets.

Player not spawning at correct location when moving between levels

@bdaenen mentioned in #32 that the player doesn't spawn at the location expected but instead spawns at the weltmeister placed location. Guessing this has to do with the recent triggers rework. Looking into this now.

Colliding entities are not removed from layer's checking list properly.

It appears that sometimes when an entity that collides or checks is killed, it is not removed from a layer's checking list properly. If that same entity is then respawned, it will check collisions twice each update. Each respawn after that will continue adding another check to the update cycle. It may be best to handle removing from layers more conservatively, instead of trying to take shortcuts for performance.

Pixel positioning on linked UI Elements?

I have a question related to positioning UIElements.

I have a UIMenu linked to a UIHighlight (both extend UIElement),,,

ig.module(
        'mygame.ui.menu'
    )
    .requires(
        //...
    )
    .defines(function () {
        'use strict';

        ig.UIMenu = ig.global.UIMenu = ig.UIElement.extend({

            //...

            init: function(x, y, settings) {
                this.parent(x, y, settings);

                this.highlight = ig.game.spawnEntity(ig.Highlight, 0, 0, {
                    linkedTo: this,
                    zIndex: this.zIndex + 1,
                    name: 'highlight',
                    //some way to set pos.x/y relative to this.pos?
                });

            },

            //...

        });

    });

I want to be able to position UIHighlight a precise number of pixels away from UIMenu. It looks like once you have the two linked, you have to position the linked element using percentages and UIElement.linkAlign.

Is there some way to set the position of the linked element using pixels? Or is there some other easier way that I am missing?

current anim not being set to jump and fall

please see fiddle: http://jsfiddle.net/gbMCQ/

line 1588 of character.js, this.ungrounded is never true, the current animated is never set to jump or fall when a jump occurs.

Examples Needed for Advanced Features

If there is an advanced feature that does not yet have an example in either examples/jumpnrun or examples/supercollider, and you feel it is difficult to understand, please reply here and let me know. I've recently added a Impact++ SUPER COLLIDER! demo, which uses almost every single feature in the library, but it may not catch everything.

Please submit your requests as lists (even in the case of a single)

• Pathfinding (done)
• Pathfinding Maps (done)
• Creature Prey / Predator (done)
• Doors (done)
• Checkpoints and Persistent Player (done)
• UI Element (done)

Defer level and level asset loading until level first activated

@Vassildador brought up the idea of a deferred loading of level js file and assets until the level is first activated in #31. This would cut down initial load time greatly. Potentially instead of loading the next level when it is activated, we could search the level for level change trigger and preload that level? If none is found, we could either do nothing or preload all remaining levels while the player plays the first level?

UIMeter sometimes throws errors when drawing values of 0 or 1.

Looks like when ig.CONFIG.SCALE is 1, a UIMeter will throw errors during draw when its value is at min or max (0 or 1).

Trying to integrate it into my existing code

Hi Collin, please see my latest reply here:

http://impactjs.com/forums/code/impact-library-75-additions/page/1#post24580

Re: I've worked my way through step 1 and 2 of the getting started guide, but I'm having issues with the entities not moving.

thanks
Chris

Explenation of the Type & Group system?

I'm reading the impact++ docs and I don't understand anything.

What are 'bitflags'? How do I add a type to my 'player' entity and my 'item' entity?

I need my player to check against 'items'. This is what I need, right?

Prerendered background maps should be merged to improve performance.

Background maps in the same layer that are prerendered have no need to remain separate. We can reduce the draw calls by 2-6x just by merging these maps into a single map.

Slope Movement is buggy?

I have an entity that extends the Player entity.

I haven't done much customization yet and I notice when my character is moving DOWN on slopes, he falls on and off the slop constantly causing my dude to switch animation from running to falling rapidly.

This does not happen on regular impact entities, what's going on?

'stop' and 'once' parameters specified in EntityExtended.animSettings are ignored

The stop or once parameters in animSettings are being ignored on an entities that extend ig.EntityExtended.

In the following entity, for example, the defaultAnim animation will repeat instead of playing once and then stopping.

ig.module(
        'game.entities.myentity'
    )
    .requires(
        'plusplus.core.config',
        'plusplus.core.entity',
        'plusplus.core.animation'
    )
    .defines(function () {

        var _c = ig.CONFIG;

        ig.MyEntity = ig.global.MyEntity = ig.EntityExtended.extend({            
            animSheet: new ig.AnimationSheet(_c.PATH_TO_MEDIA + 'myentity.png', 32, 32),
            animSettings: {                
                defaultAnim: {
                    frameTime: 0.1,
                    sequence: [0,1,2,1,0],                
                    once: true
                }
            }
        });
    });

I added a pull request #29. It should resolve this issue.

Value of "scale" is undefined in image-drawing.js

In Image-drawing.js on line 129 x and y are both divided by "scale", but I can't seem to find where you define scale. I would issue a pull request, but with trial and error I have been unable to find what the value of scale should be.

I tried changing scale to "this.scale" which ran without errors, but gave very odd results when trying to view any images.