phoboslab / impact Goto Github PK

Hey! I didn't see any tests, do you have a plan/opinion on how to start testing it?

this is regarding your (very old) blog post: https://impactjs.com/forums/impact-engine/misuse-of-requestanimationframe (it says to bring questions to this github repo)

I'm actually not using impact, but have a slow-running (on android, specifically) canvas game that I'm looking to fix up.

My current loop looks like this:

var tick = function()
{
  requestAnimationFrame(tick,canvas);
  current_scene.tick();
  current_scene.draw();
}

I'm confused what your blog post is suggesting- should I instead architect it like this:

var tick = function()
{
  current_scene.tick();
  requestAnimationFrame(draw,canvas);
}
var draw = function()
{
  current_scene.draw();
  setTimeout(tick,0);
}

?

I've tried this, and it hasn't seemed to effect performance (which is fine- my problem is likely elsewhere), but it's also irrecoverably stalled the game where it previously would just lag a bit.

I just want to make sure I'm even taking your suggestion correctly before digging more deeply into it.

Thanks!

Is it possible to scroll the tileset picker when using taller tileset images? Zooming out shows the whole tileset, but too small to select the desired tile image.

Probably ought to be:

var head = ig.$new('strong');

I'm not even sure why the original doesn't throw an error, because all ig.$new does is

and new (document.createElement( 'strong' )); throws JavaScript error:

Uncaught TypeError: document.createElement(...) is not a constructor

This issue comes from: https://impactjs.com/forums/impact-engine/bug-debug-module-clocks-not-accurate

Someone correct me if I'm wrong here, but it seems that the debug module clocks are not necessarily accurate. Or at least, not what you might expect.

This is due to the order of operations that occur when classes inject/extend to and from each other.

For example, the debug module injects a clock into ig.Game:

ig.Game.inject({
    draw: function() {
        ig.graph.beginClock('draw');
        this.parent();
        ig.graph.endClock('draw');
    }
});

However, since this module is always loaded before our custom game class (lib/game/main.js), that means any modifications to draw we make in our game class won't be clocked.

MyGame = ig.Game.extend({
    // ...
    
    // this draw function wraps after the debug version
    draw: function() {
        this.parent(); // will be clocked
        this.drawGUI(); // will NOT be clocked
    }
});

The same applies to the other clocks, such as the "update" clock. It's only measuring the ig.Game.update logic, which includes updateEntities and checkEntities for example, but none of your own custom game code.

Is the version of Impact that was uploaded to Github missing some of the later changes?

Here's a commit that shows Dominic adding a line to Input.js back in 2015:

$ git show 9333a38c
commit 9333a38c6d35f4dfd1ecc7cece5f3a7a4becfca7
Author: phoboslab <[email protected]>
Date:   Sun Oct 18 18:32:42 2015 +0200

    Release button when touch is canceled; thanks @Joncom

diff --git a/lib/impact/input.js b/lib/impact/input.js
index b1fa2fb..f9edd27 100644
--- a/lib/impact/input.js
+++ b/lib/impact/input.js
@@ -129,6 +129,7 @@ ig.Input = ig.Class.extend({
                        // Standard
                        ig.system.canvas.addEventListener('touchstart', this.keydown.bind(this), false );
                        ig.system.canvas.addEventListener('touchend', this.keyup.bind(this), false );
+                       ig.system.canvas.addEventListener('touchcancel', this.keyup.bind(this), false );
                        ig.system.canvas.addEventListener('touchmove', this.mousemove.bind(this), false );

                        // MS

However, if we look at the history for that file, the commit is not on Github...
https://github.com/phoboslab/Impact/commits/master/lib/impact/input.js

Edit: Just patched it in manually...
b8f633c

broken link for download from web page
http://impactjs.com/download/files/impact-1.24.zip?key=$token
No token (invalid token)

Dialogs are initialized to null:

However, deleteLayerDialog was missed above:

ig.Game is not used, so this line doesn't need to be here, right?

So, I'm not sure if this is the place to ask for help, but the forum redirected me here. I'm attempted to make a top-down game. I have movement for UP, LEFT, RIGHT, and DOWN, but I'm attempting to do Diagonal movement. The code I have so far is this:

    //DIAGONAL-UP-RIGHT ATTEMPT//
    else if(ig.input.state('up') && ig.input.state('right')) {
      this.vel.y = -this.speed;
      this.vel.x = +this.speed;
    }

Seeemed logical to me, but unfortunately it didn't work. Any advice?

I'm trying to make a game that does not involve any sliding physics or pushing entities and I can't figure out how to prevent sliding when entities come in contact with each other.

Is there a particular setup that can prevent this on all or certain type of entities?

I've always found it a little strange that a pixel art centric game engine reports incorrect values when dealing with the pixel font class.

font.getHeightForString('Hello'); <-- incorrect value
font.height <-- also incorrect

For example, using the default font that comes with Impact:

font.height returns 9

It (kind of?) makes sense, because the image itself is that tall.

But really the font should report 7, because the bottom two lines contain no visual font data...

Ie. One line is empty space, and the other line represents character widths.

showNumber takes a width argument which gets passed into addNumber

... which ultimately never gets used for anything.

Furthermore, no showNumber calls ever bother to pass in width in the first place...

How do I get the x and y position of the surrounding tiles of a player? I am trying to place a NPC beside a vacant tile and to take specific action, not collide or moving at the exact position of the player.

As the above snippet mentions, an advantage to using "HTML5 Audio" for music, is that it the audio can be streamed. And Impact enforces this preference by throwing an error.

However, I can think of at least one advantage to allowing "Web Audio" to be used...

Getting sounds to play at all in mobile browsers is a bit finicky:

To prevent annoying ads during mobile web browsing, all sounds are always disabled by default (on iOS Safari at least), until at least one sound has been played in the actual callback of a touchend event, which can only triggered by the user himself.

With "Web Audio", the solution is easy:

In the case of "Web Audio", playing a single sound in this callback will enable all other and future "Web Audio" playback. Playing one sound enables all the others.

However, with "HTML Audio", it's more cumbersome:

Each and every individual sound file must be played in this callback, to enable each one for future playback.

Here is the basic solution to get audio enabled on mobile browsers:

ig.system.canvas.addEventListener('touchend', function() {
    if( !ig.game.mobileAudioEnabled ) {
    
        // Playing a single "Web Audio" source will enable all others
        ig.game.silent.play();
        ig.game.silent.stop();

        // Each "HTML5 Audio" source much be enabled invididually
        for(var i=0; i<ig.game.tracks.length; i++) {
            ig.game.tracks[i].play();
            ig.game.tracks[i].stop();
        }

        ig.game.mobileAudioEnabled = true;
    }
}, false);

Although this works to enable all sounds, it has 2 issues:

1. Brief laggy moment when sounds first enable (noticeable FPS jitter)
2. The tracks in ig.game.tracks can be heard for a split second

If ig.Music were modified to allow tracks to be "Web Audio" instead of "HTML5 Audio", I think issues 1 and 2 would both be resolved.

ig.system.canvas.addEventListener('touchend', function() {
    if( !ig.game.mobileAudioEnabled ) {
        ig.game.silent.play();
        ig.game.silent.stop();
        ig.game.mobileAudioEnabled = true;
    }
}, false);

Just thinking out loud here... Maybe it would be an idea to allow both types of audio for music, so that if streaming is important, that works, and if streaming is not important but support for mobile audio is, that option works a bit nicer too.

Edit:

Hmm. I just noticed there's actually already some audio unlock logic in sound.js:

However, this logic does not work, which is why I came up with my own unlock logic in the first place.

But the follow patch fixes it:

diff --git a/lib/impact/sound.js b/lib/impact/sound.js
index 50d74be..afcc7a4 100644
--- a/lib/impact/sound.js
+++ b/lib/impact/sound.js
@@ -34,13 +34,13 @@ ig.SoundManager = ig.Class.extend({
                if( ig.Sound.enabled && ig.Sound.useWebAudio ) {
                        this.audioContext = new AudioContext();
                        this.boundWebAudioUnlock = this.unlockWebAudio.bind(this);
-                       document.addEventListener('touchstart', this.boundWebAudioUnlock, false);
+                       ig.system.canvas.addEventListener('touchstart', this.boundWebAudioUnlock, false);

                }
        },

        unlockWebAudio: function() {
-               document.removeEventListener('touchstart', this.boundWebAudioUnlock, false);
+               ig.system.canvas.removeEventListener('touchstart', this.boundWebAudioUnlock, false);

                // create empty buffer
                var buffer = this.audioContext.createBuffer(1, 1, 22050);

As far as I can tell though, Impact still has no "audio unlock" for HTML5 audio...

Hello.

It appears that ig.ua.mobile is no longer working on Chrome on iOS.

Now the buttons won't draw().

I was thinking about just checking for screen width... Maybe that's a more resilient method.

and

Steps to reproduce:

1. Load any level
2. Create some entity
3. Give the entity a name property of any string, such as "player"
4. Delete the entity by pressing "Z" to undo the entity creation
5. Press "Y" to redo the entity creation

An error was thrown in console.

This line:

Should be:

ig.game.entities.namedEntities[action.entity.name] = action.entity;

Because wm.Undo has no namedEntities object...

I think there might be a bug in impact.background-map, which causes it to sometimes draw wastefully when pre-rendering is turned on.

Let's assume:

• the canvas is 1280 x 720
• the chunk size is the default 512
• the camera (ig.game.screen) is at 0, 0
• the map has a total pixel width of 1216 pixels
• the map repeats

Chunks will be drawn from left to right...

1. The 1st chunk is drawn to x=0, y=0
2. The 2nd chunk is drawn to x=512, y=0
3. The 3rd chunk is drawn to x=1024, y=0
4. The 4th chunk is drawn at x=1216, y=0 because the 3rd chunk was only 192 pixels wide (1216 - 1024 = 192), triggering the following code to execute, incrementing maxChunkX, and therefore drawing an extra chunk to fill the remaining area, as was intended:

// If we repeat in X and this chunk's width wasn't the full chunk size
// and the screen is not already filled, we need to draw anohter chunk
// AND nudge it to be flush with the last chunk
if( this.repeat && chunk.width < this.chunkSize && x + chunk.width < ig.system.realWidth ) {
	nudgeX += this.chunkSize - chunk.width;
	maxChunkX++;
}

The problem however, is that this maxChunkX++ increments for every row, so when the 2nd row is drawn, 1 chunk will drawn unnecessarily, completely off screen to the right. And as the 3rd row is drawn, now 2 unnecessary draws. The 4th row, 3 unnecessary draws. And so on and so forth.

Is there any way to edit images, like merge two images together and return a new image instance, or replace certain colours in an image to another colour?

So, I once had to write some integration tests for a game made with impact.js. I didn’t create the game nor had I any knowledge of impact.

For these tests I was using Selenium and Appium. With Selenium I tried to click simple buttons inside the game. To my suprise that was not working. And at this point I’d just want to know if I judged the issue correctly and if there is a better workaround.

I wasn’t able to use Seleniums click method because the element I wanted to interact with was expecting something called ig.touchEvent. And as far as I understood the way Selenium works, is that it sends an HttpRequest to the browser to execute the according event, but since this event is not native to any browser Selenium could not do so? That’s atleast my explanation. My workaround for this was to simply the trigger this event on the according element through javascript, which works fine.

So is there another explanation and workaround for this case?

Better if the number 10 only appears once...

Top and right side look OK.

But left and bottom do not.

Or, is it supposed to look like the double (duel direction) arrows instead?

As far as I can tell this doesn't get used anywhere...

Furthermore, there are other ways of detecting if the editor is running:

if( ig.global.wm ) { /* running weltmeister */ }
if( ig.editor ) { /* running weltmeister */ }

Is there really any need to add this information to every single entity?

Apparently the mousewheel event implemented by Impact

is not current and should not be used, according to:

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event

and that link suggests using the following instead:

https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event

I'm in the process of planning a music game, I was wondering if there was a way for impact.js to detect a midi note press instead of a computer keyboard press?

Thank you for your help!

Therefore, line 12 could probably be removed?

Say, for example, you wanted to create two instances of ig.Font, both which share the same image: 'media/04b03.font.png'

MyGame = ig.Game.extend({

	font1: new ig.Font( 'media/04b03.font.png' ),
	font2: new ig.Font( 'media/04b03.font.png' ),
	
	draw: function() {
		this.parent();

		var x = ig.system.width/2,
			y = ig.system.height/2;
		
		this.font1.draw( 'It Works 1!', x, y, ig.Font.ALIGN.CENTER );
		this.font2.draw( 'It Works 2!', x, y + 10, ig.Font.ALIGN.CENTER );
	}
});

Then let's say you want to modify the letter spacing of one, but not the other...

It's not possible. Modifying one font instance, modifies the other, because they are the same instance. You can't have more instances, due to the way ig.Image caching works.

This works great for images, but not necessarily for fonts.

Perhaps it would make sense for ig.Font to be its own class, and simply have an image property which it reads from, instead of extending from ig.Image.

What is wrong with my code? I can't spawn a button entity from the init function of another entity.

ig.module(
'game.entities.HomeScreen'
)
.requires(
'impact.entity',
'plugins.button'
)
.defines(function(){

    HomeScreen = ig.Entity.extend({


        size: {x: 1915, y: 1080},
        animSheet: new ig.AnimationSheet( 'media/game_assets/landing_screen/bg.jpg', 1915, 1080),
        rulesBtn: null,

        init: function( x, y, settings ) {

            this.parent( x, y, settings );
            this.addAnim('idle', 1, [0]);

            this.spawnHUD();
        },

        spawnHUD: function () {


            this.rulesBtn = ig.game.spawnEntity(Button, 100, 100, {

                id:  'rules',
                name: 'rules_btn',
                animSheet: new ig.AnimationSheet( 'media/game_assets/landing_screen/rules.png', 621, 170),

                pressedUp: function(){
                    console.log('Pressed Up!');
                }
            });
        }
    });
});

Steps to reproduce:

1. Load any level
2. Select some entity
3. Give the entity a name property of any string, such as "player"
4. Delete the entity
5. Press "Z" to undo

An error was thrown in console.

This issue affects the "redo" code as well.

The reason this happens is because when a deleted entity has a name, this code gets executed when you undo the deletion:

And there is no property called namedEntities in this class.

Hi, I'm trying to implement a roaming enemy or npc entities which stops the player when collided and vice versa. How do I go about this? If I set FIXED on both player and npc, the npc still slides away when collided.

What's the cause of this error , I scanned through the impact classes found nothing related
CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.

As far as I can tell, none of these are actually used within the ig.Loader class/module...

Edit:

It's for sure possible to have a game that doesn't use any ig.Font, but by requiring it here, the font code will still get baked into the final output, unnecessarily.

One could argue that some of those required modules do get used in the loader, because they are populated into the resources array, and then manipulated via methods such as .load...

What does it do? Can't seem to find any documentation for this property anywhere on the internet.

This variable doesn't get used anywhere.

Hi,

a few month ago, i forked Impact and tried to move it to the shiny new world of javascript.

• completely removed the custom ig.Class
• moved to webpack to pack everything
• added eslint

and to simplify everything, i wrote a small cli, to bootstrap new impact projects and running weltmeister out of the box

want to take a look at it? i also made a demo gif for a short overview ;)

https://github.com/cdreier/Impact

perhaps a chance to merge it?

This method doesn't actually exist. It's undefined...

The engine uses: https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event

which is apparently deprecated

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible

and non-standard

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

There should probably be a space after the : to match the style of the lines above it.

We are passing the canvas to it for some reason:

But it's not a valid argument and doesn't do anything:
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#Syntax