phoboslab / impact Goto Github PK
View Code? Open in Web Editor NEWHTML5 Game Engine
License: MIT License
HTML5 Game Engine
License: MIT License
Dialogs are initialized to null:
Impact/lib/weltmeister/weltmeister.js
Lines 45 to 47 in 9821310
However, deleteLayerDialog
was missed above:
Impact/lib/weltmeister/weltmeister.js
Line 65 in 9821310
Impact/lib/weltmeister/weltmeister.js
Line 71 in 9821310
Impact/lib/weltmeister/weltmeister.js
Line 77 in 9821310
Impact/lib/weltmeister/weltmeister.js
Line 79 in 9821310
The engine uses: https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event
Line 160 in 301f544
Impact/lib/weltmeister/evented-input.js
Line 58 in 301f544
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.
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.
Impact/lib/weltmeister/edit-entities.js
Line 381 in f461c2f
Line 211 in f461c2f
This variable doesn't get used anywhere.
Impact/lib/weltmeister/edit-entities.js
Line 529 in f461c2f
Impact/lib/weltmeister/undo.js
Lines 10 to 17 in 425cbc1
Better if the number 10
only appears once...
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.
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!
Impact/lib/impact/debug/maps-panel.js
Line 49 in 6d06c28
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
Lines 110 to 111 in 6d06c28
and new (document.createElement( 'strong' ));
throws JavaScript error:
Uncaught TypeError: document.createElement(...) is not a constructor
// Pre-patch:
ig.game.font.widthForString('HELLO'); // 22
// Post-patch:
ig.game.font.widthForString('HELLO'); // 21
diff --git a/lib/impact/font.js b/lib/impact/font.js
index 638e91b..5d085c0 100644
--- a/lib/impact/font.js
+++ b/lib/impact/font.js
@@ -42,7 +42,10 @@ ig.Font = ig.Image.extend({
_widthForLine: function( text ) {
var width = 0;
for( var i = 0; i < text.length; i++ ) {
- width += this.widthMap[text.charCodeAt(i) - this.firstChar] + this.letterSpacing;
+ width += this.widthMap[text.charCodeAt(i) - this.firstChar];
+ }
+ if( text.length > 0 ) {
+ width += this.letterSpacing * (text.length - 1);
}
return width;
},
showNumber
takes a width
argument which gets passed into addNumber
Impact/lib/impact/debug/menu.js
Lines 81 to 86 in 10020ba
... which ultimately never gets used for anything.
Impact/lib/impact/debug/menu.js
Lines 72 to 78 in 10020ba
Furthermore, no showNumber
calls ever bother to pass in width
in the first place...
Impact/lib/impact/debug/menu.js
Lines 184 to 189 in 10020ba
We are passing the canvas to it for some reason:
Lines 433 to 438 in 1425a04
But it's not a valid argument and doesn't do anything:
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#Syntax
Impact/lib/weltmeister/weltmeister.js
Line 466 in f461c2f
There should probably be a space after the :
to match the style of the lines above it.
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?
Apparently the mousewheel
event implemented by Impact
Line 120 in b8f633c
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
Impact/lib/weltmeister/weltmeister.js
Lines 7 to 9 in 70f34c8
ig.Game
is not used, so this line doesn't need to be here, right?
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.
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);
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?
Steps to reproduce:
name
property of any string, such as "player"
An error was thrown in console.
This line:
Impact/lib/weltmeister/undo.js
Line 111 in f461c2f
Should be:
ig.game.entities.namedEntities[action.entity.name] = action.entity;
Because wm.Undo
has no namedEntities
object...
Hi,
a few month ago, i forked Impact and tried to move it to the shiny new world of javascript.
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?
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!');
}
});
}
});
});
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:
ig.game.screen
) is at 0, 0
Chunks will be drawn from left to right...
x=0, y=0
x=512, y=0
x=1024, y=0
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.
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?
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
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
.
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.
Steps to reproduce:
name
property of any string, such as "player"
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:
Impact/lib/weltmeister/undo.js
Line 71 in f461c2f
And there is no property called namedEntities
in this class.
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!
Hey! I didn't see any tests, do you have a plan/opinion on how to start testing it?
Lines 239 to 249 in 3b6d3b5
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:
ig.game.tracks
can be heard for a split secondIf 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:
Lines 37 to 52 in 6c4a603
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...
Lines 4 to 8 in 1425a04
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
...
broken link for download from web page
http://impactjs.com/download/files/impact-1.24.zip?key=$token
No token (invalid token)
Impact/lib/weltmeister/weltmeister.js
Line 528 in f461c2f
Impact/lib/weltmeister/modal-dialogs.js
Line 31 in f461c2f
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.
Impact/lib/weltmeister/edit-entities.js
Line 343 in 425cbc1
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?
Lines 10 to 12 in 70f34c8
Therefore, line 12 could probably be removed?
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.
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?
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.
Line 520 in d36fcc4
What does it do? Can't seem to find any documentation for this property anywhere on the internet.
Impact/lib/weltmeister/tile-select.js
Line 139 in f461c2f
and
Impact/lib/weltmeister/tile-select.js
Line 140 in f461c2f
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.