We Keep Coding

How can I keep the canvas in focus (center) of the camera when the screen size of the browser changes while using Babylonjs?

The user can change the screen size and this distorts the size of the canvas we created and thus the image focus of the camera. To solve this problem, we need to write focusing code.

relocateCamera_CanvasSize = () => {
this.engine = this.scene.getEngine();
this.engine.onResizeObservable.add(() => {
if (this.scene.getEngine().getRenderHeight() > this.scene.getEngine().getRenderWidth()) {
camera.fovMode = Camera.FOVMODE_HORIZONTAL_FIXED;
}
else {
camera.fovMode = Camera.FOVMODE_VERTICAL_FIXED;
}
});
}

Detection with collision in canvas phaser without physics

I have to do a mini video game for a practice. I have coded in Phaser, JavaScript and Java. The canvas is drawn in Phaser.
I need to put collisions in the borders of the world or something when my spaceship touch the canvas limit for my spaceship doesn't go out to the screen.
My teacher forbidden do something with physics like arcade, ninja, or P2.
Its doesn't matter if the solution is in JavaScript or Phaser. Only I need to put limits in the canvas' border.
I have this for drawing the world in Phaser:
game = new Phaser.Game(1024, 600, Phaser.AUTO, 'gameDiv'
I have my sprite in the world in the preload:
game.global.myPlayer.image = game.add.sprite(0, 0, 'spacewar', game.global.myPlayer.shipType);
In the create function I have the keyboard control:
this.wKey = game.input.keyboard.addKey(Phaser.Keyboard.UP);
this.sKey = game.input.keyboard.addKey(Phaser.Keyboard.DOWN);
this.aKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
this.dKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
this.spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.CONTROL);
this.shiftKey = game.input.keyboard.addKey(Phaser.Keyboard.SHIFT);
In the update function the movement:
if (this.wKey.isDown)
msg.movement.thrust = true;
if (this.sKey.isDown)
msg.movement.brake = true;
if (this.aKey.isDown)
msg.movement.rotLeft = true;
if (this.dKey.isDown)
msg.movement.rotRight = true;
if (this.spaceKey.isDown) {
msg.bullet = this.fireBullet()
}
if (this.shiftKey.isDown) {
msg.push = true;
}

Not sure how asking for the solution to a school project will help you learn anything..
But anyway, the update() function is called for every frame (60 times per second), so inside that function you can do something like this to prevent the player from moving outside the game area:
// cannot move outside game area, left and right
if (game.global.myPlayer.image.x < 0) {
game.global.myPlayer.image.x = 0;
}
if (game.global.myPlayer.image.x > game.world.width) {
game.global.myPlayer.image.x = game.world.width;
}
// cannot move outside game area, top and bottom
if (game.global.myPlayer.image.y < 0) {
game.global.myPlayer.image.y = 0;
}
if (game.global.myPlayer.image.y > game.world.height) {
game.global.myPlayer.image.y = game.world.height;
}

Adobe Animate CC JavaScript: Mouse follower is not aligned when responsive is active

I have started a website on Adobe Animate CC, I have done mouse follower with this code snippet:
this.stage.canvas.style.cursor = "none";
this.mouseEnabled = true;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));
function fl_CustomMouseCursor() {
this.plus_mc.x = stage.mouseX;
this.plus_mc.y = stage.mouseY;
this.black_plus_mc.x = stage.mouseX;
this.black_plus_mc.y = stage.mouseY;
}
When I check on make it responsive at publish settings the follower is not aligned with mouse cursor, it only get aligned when I position the cursor at the browser top left corner then it get far as I move the cursor.

I found the solution from Adobe forum by ClayUUID:
I divided the coordinates by stage.scaleX and scaleY.
Here is the correct code to make the page responsive with cursor follower aligned:
this.stage.canvas.style.cursor = "none";
this.mouseEnabled = true;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));
function fl_CustomMouseCursor() {
this.plus_mc.x = stage.mouseX / stage.scaleX;
this.plus_mc.y = stage.mouseY / stage.scaleY;
this.black_plus_mc.x = stage.mouseX / stage.scaleX;
this.black_plus_mc.y = stage.mouseY / stage.scaleY;
}
Thank you

CreateJS FPS drop when calling stage.update

I'm making a game using CreateJS. On desktop my FPS is good but when I try to play this game on mobile (for example : iPhone 4) the FPS drops seriously.
I'm trying to figure out why but
Some code
My Canvas
<canvas id="gameCanvas"></canvas>
Setup
this.canvas = "gameCanvas";
this.stage = new createjs.Stage(this.canvas);
var context = this.stage.canvas.getContext("2d");
context.imageSmoothingEnabled = false;
createjs.Ticker.setFPS(30);
this.gameLoopBind = this.gameLoop.bind(this);
createjs.Ticker.addEventListener('tick', this.gameLoopBind);
GameLoop
// some extra code
this.stage.update();
When I comment the code 'this.stage.update()' my FPS on mobile/tablet is good...
I've no idea what I'm doing wrong...
EXTRA CODE
Play the game here => f.cowb.eu/mora/chick-ins
Gameloop Function
Game.prototype.gameLoop = function (e) {
if (this.running) {
this.timer++;
this.timer2++;
if (this.timer2 > 30) {
if (this.lastSnack + this.timeBewteen < this.stopwatch.seconds) {
var height = (this.topSnack) ? 150 : 300;
this.lastSnack = this.stopwatch.seconds;
new Snack(this, this.timer, height);
this.topSnack = this.topSnack ? false : true;
}
if (this.timer > (this.lastPostive + 300)) {
this.lastPostive = this.timer;
publisher.publish('showMessage',
this.positiveImages[Math.floor(Math.random() * this.positiveImages.length)],
common.lang,
'right');
}
this.timer2 = 0;
}
}
this.stage.update();
};
New Snack
You can find the code for creating a new snack here => http://jsfiddle.net/9ofpqq3z/
Here we create a new snack and animate it.

From looking at the architecture of the game, I would suggest that you draw the game elements on separate canvases as opposed to the way you have it right now where everything is on one canvas.
Place the TV parts that don't get redrawn often (or at all) on one canvas, and then the moving elements on a separate canvas.
That should help bring the frame rate up.
Also, you can take a look at the following set of slides on how to improve performance on mobile devices when using the canvas:
http://www.slideshare.net/DavidGoemans/html5-performance-optimization

javascript how can I make <img> collide with each other in DOM not canvas

Ok I got 2 images one of a player that I make jump and another one of a barrel that rolls towards the player. I searched on google to get all the code that I have together. The problem is I can't find a code that can detect collisions. I need that code so when the barrel hits the player its game over.
GamePlay press the start button and the barrel rolls towards the player , press anywhere onscreen to make player jump. The source code is here if you want to try it http://sourceforge.net/projects/pfbw/files/Platformer.zip/download Thanks for any help you can afford me. Every code I tried didnt work for collision detection.
<!DOCTYPEhtml>
<html>
<head>
<script>
function jump() { // controls player jump
document.getElementById("m").style.top = "250px";
setTimeout(function () {
document.getElementById("m").style.top = "390px";
}, 1500)
}
function moving() { // controls barrel movement
var pp = document.getElementById("b");
var left = parseInt(pp.style.left);
var tim = setTimeout("moving()", 50); // controls the speed
left = left - 25; // move by 50 pixels
pp.style.left = left + "px";
}
</script>
</head>
<body>
<img src="back.png" onclick="jump()" style="position:absolute;top:0;left:0; height:570px;width:1200px;zdepth:1;" />
<img id="m" src="Mario.png" style="position:absolute;top:390px;left:75px;height:80px;width:80px;zdepth:2;" />
<img id="b" src="barrel.png" style="position:absolute;top:390px;left:1000px;height:80px;width:80px;zdepth:2;" />
<img id="s" src="start.png" onclick="moving()" style="position:absolute;top:0px;left:500px;height:80px;width:80px;zdepth:2;" />
</body>
</html>

You need to check if they are in the same position on the page. You're using top and left to set the coordinates of the images, so you need to check to see if they are at the same top and the same left offsets:
var topEq = document.getElementById('m').style.top === document.getElementById('b').style.top;
var leftEq = document.getElementById('m').style.left === document.getElementById('b').style.left;
if(topEq && leftEq){
//game over
}
Alternatively, you can run the whole game in a while loop like this:
var playing = true;
while(playing){
//game
if(topEq && leftEq){
playing = false;
}
}

you will need to manually check that the items do not overlap. The simplest way I know of doing this is to test to see that the rectangle of the one does not overlap with the rectangle of the other.
element.getClientRects() which provides top/bottom/left/right. a sample collision detection function might look like this:
function colides(elem1, elem2){
var cr1 = elem1.getClientRects()[0]; // get the rectangle for the image
var cr2 = elem2.getClientRects()[0]; // ''
var heightOffset = (cr1.bottom - cr2.top); // calculate relative positions vert
var widthOffset = (cr1.right - cr2.left ); // calculate relative positions horiz
if ( heightOffset < (elem1.clientHeight + elem2.clientHeight) // bottom of one below top of other
&& heightOffset > 0 // and not below bottom of other
&& widthOffset < (elem1.clientWidth + elem2.clientWidth) // left of one further right than right of other
&& widthOffset > 0) // and not to the right of it
return true; // this is a collision.
return false; // we didn't return true, so it must be false.
}
this will give false positives because your actors do not take up the whole rectangle, but it is a start.
insert the above function into your code, and use it in your moving function like this:
function moving() // controls barrel movement
{
var barrel = document.getElementById("b"); // get the barrel image
var mario = document.getElementById("m"); // get the mario image
var left = parseInt(pp.style.left); // figure out how far left the barrel is
if (colides(barrel, mario)){ // if there is a collision
barrel.style.left = "1000px" // reset position
alert ("game over"); // notify player
} else { // else
var tim = setTimeout("moving()",50); // run this code again in 50ms
left = left-25; // move by 25 pixels // set the left coordinate down by 25px
if (left < 0) left = 1000; // if we would go off the screen, reset
barrel.style.left = left+"px"; // set the position of the image to match our variable
}
}
Edit added comments. these should explain the code.