game.physics.arcade.collide() in phaser js - javascript

I use framework phaser js.
I create a two circles using graphics
var graphics;
var ball;
var graphics1;
var ballHome;
function create(){
game.physics.startSystem(Phaser.Physics.ARCADE);
graphics=game.add.graphics(500,500); //first circle
game.physics.arcade.enable(graphics);
graphics.enableBody=true;
graphics.beginFill(0xFFFFFF,1);
ball=graphics.drawCircle(10,10,15);
graphics.endFill();
graphics1=game.add.graphics(500,500); //second circle
game.physics.arcade.enable(graphics1);
graphics1.enableBody = true;
graphics1.beginFill(0xFFF55F,1);
ballHome=graphics1.drawCircle(300,300,500);
graphics1.endFill();
}
function update() {
game.physics.arcade.collide(ball,ballHome);
}
I want them to collide
Why does not game.physics.arcade.collide(ball,ballHome) work?
Thanks for the help

The problem is that the collide() function takes Phaser.Sprites as its input, but ball and ballHome are not sprites; they are PIXI.Graphics objects. You need to create sprites from your Graphics objects, and then pass those sprites into collide().
To make a sprite from your graphics object, first call Graphics.generateTexture() (doc) to create a texture, then call game.add.sprite() (doc) with the texture you just created.
For more information on Phaser, plus loads of really helpful tutorials, see the Phaser website.

Related

How to create multiple images before a program is run and draw them individually outside of the image.onload() function?

I am trying to draw hundreds of images onto a canvas, but only when I reference the specific image variable. I encountered a function created by someone responding to another one of these posts that I was using. It was something like map = createImage("images/Global/Map.png") and it would return the value I was able to draw like this: ctx.drawImage(map, 0, 0, 224, 292) instead of me having to do it in the onload function.
I guess what I am trying to ask is how would I create an object that would allow me to do this?
I tried something along the line of this:
const createImage = function(src) {
image = newImage();
image.src = src;
image.onload = function() {
return(image);
}
}
// Other code creating images...
var map = createImage("images/map.png");
// Code to draw map
ctx.drawImage(map, 0, 0, 224, 292);
Thanks in advance. I'm hoping its a simple problem.
I was an idiot and should not have been allowed to post this question.
I was trying to do animations using canvas on javascript.
The thing that would have solved my problem (while it was never a problem to begin with) was the window.requestAnimationFrame(function()). As it kept animating, sooner or later the images would load and be drawn. To my eyes, it appeared as if it were instant, hence my wanting the program to wait until everything was loaded.
There was never a problem to begin with. Oops.

Dynamically adding meshes causes controls to lag

I am making a 3D map in Three.js.
I am constructing the geometry and texture from fetched 256x256 pixel images, construct a THREE.Mesh and add it to the scene when it's done.
However, adding tiles to the map causes MapControls to lag noticeably, if the user is panning or zooming around quickly. This can be alleviated by using smaller tiles (such as 128*128), but I want to find a better way, as I've seen examples of very smooth maps using Three.js. The controls work smoothly after all the tiles in view have loaded.
I have 2 event listeners. One triggers when controls change:
this.controls.addEventListener('change', this.update);
And renders the map:
update = () => {
this.renderer.render(this.scene, this.camera);
};
The other listens for the move to end, and then fetches the tiles in view:
this.controls.addEventListener('end', this.fetchTilesIfNecessary);
fetchTilesIfNecessary then creates Promises, which start fetching the tiles. When the tiles are fetched, they are added to the map and this.update is called:
addTile(tile) {
this.scene.add(tile.mesh);
this.update();
}
Perhaps I should mention that I have a callback when the tile mesh gets rendered:
this.mesh.onAfterRender = this.disposeAttributes;
Which clears the attributes which are causing a lot of memory usage
disposeAttributes(renderer, scene, camera, geometry, material, group) {
geometry.getAttribute('position').array = [];
geometry.getAttribute('normal').array = [];
geometry.getAttribute('uv').array = [];
}
Is there a better way? How can I add meshes to the scene dynamically and keep the controls running smoothly?
One way to mitigate this issue is to pre-compile all shaders via WebGLRenderer.compile(). Meaning when your app starts, you add all tiles to your scene and then call renderer.compile() once with the scene's camera.
this.mesh.onAfterRender = this.disposeAttributes;
This is not recommended since it will be executed on each render call. If you want to free the geometry data one the JS side, use the onUpdate() callback of BufferAttribute().
geometry.getAttribute( 'position' ).onUpload( disposeArray );
function disposeArray() {
this.array = null;
}

How to animate js turtle fractals?

I need to draw fractal using js turtle library so, the fractal is animated until it is drawn totally like the python turtle example here
I've tried in the command here. There's a function called animate in the docs but I'm not able to use it, it only waits for some time then draw the fractal without any animation.
I type in the command input animate(demo, 1000)
Is there any suggestion?
if I can't use animation in js turtle Is there another fast easy library that can do the job of drawing fractals?!
You're not using animate() correctly. You can't just apply it to a finished program and expect its behavior to change. Instead, you need to incorporate it into the program. There should be a function that draws a portion of the animation each time it's called. Then have it called over and over by animate(). Rewritting your example:
function square(side) {
repeat(4, function () {
forward(side);
right(90);
});
}
var s = 100
function draw() {
square(s);
right(36)
s -= 10
if (s < 0) {
s = 100
clear()
}
}
function demo() {
hideTurtle();
colour(0, 0, 255, 1);
animate(draw, 500);
}
Invoke it via demo(), don't call animate() on it. It's basic animation unit is the square. If you want to see the squares being drawn, then you need to redesign the code to make the basic animation unit the side of a square (i.e. line.)

p5 canvas static after being cloned

Following instructions from this question, I have a div which is being cloned that has a p5 canvas inside it. When it is cloned the canvas is not responsive to mouse coordinates.
How do I make the p5 canvas still active after cloning?
$(document).ready(function() {
$(".showcanvas").click(function() {
// Find the original canvas element
var origCanvas = $(".canvas").first().find('canvas')[0];
// Clone the div wrapper
var clonedDiv = $(".canvas").first().clone(true);
// Find the cloned canvas
var clonedCanvas = clonedDiv.find('canvas');
// Update the ID. (IDs should be unique in the document)
clonedCanvas.prop('id', 'defaultCanvas' + $(".canvas").length)
// Draw the original canvas to the cloned canvas
clonedCanvas[0].getContext('2d').drawImage(origCanvas, 0, 0);
// Append the cloned elements
clonedDiv.appendTo("article").fadeIn('1200');
});
});
https://jsfiddle.net/vanderhurk/12fxj48h/28/
I was going to comment on your previous question about this. The approach you're taking of cloning the canvas element and then drawing the old canvas into the new canvas is going to have exactly this problem: the new canvas is not going to change as the old canvas changes. This might work if you just want to take a snapshot (although there are easier ways to do this), but my guess is it's not what you're looking for.
Instead of cloning the element and dealing with JQuery, I suggest you look into using instance mode from the P5.js library. You can read more about instance mode here, but basically it allows you to package your P5.js code in a self-contained object.
Here's a simple example:
var s = function( sketch ) {
var x = 100;
var y = 100;
sketch.setup = function() {
sketch.createCanvas(200, 200);
};
sketch.draw = function() {
sketch.background(0);
sketch.fill(255);
sketch.rect(x,y,50,50);
};
};
var myp5 = new p5(s);
If I were you, I would encapsulate the creation of an instance-mode P5.js sketch into a function or class. Then whenever I want to create a new copy of the sketch, I'd call that function or class. You could also store any shared state in global variables that both sketches access.

Phaser 3: Matter physics detect collision

I am trying to detect when two object collide with each other, but I am not sure how to do it.
I have the following scene, which adds two physics images to the scene. I just need a way to detect when the two collide.
export class MainGame extends Scene {
public create() {
// Create the player
this.player = this.matter.add.image(300, 100, 'player')
// Create a pillar
let pillar = this.matter.add.image(500, 0, 'pillar1', null, { isStatic: true })
// Somehow detect collision between the two...
}
}
What I cannot figure out is how to detect when the player collides with the pillar. Everything I have searched for is how to do this using arcade physics, but I am using matter physics.
I cannot find any information on how to detect collision and then run a function.
After looking at examples here,
To call a function on collision, use the 'oncollisionStart' event like in this example.
this.matter.world.on('collisionstart', function (event, bodyA, bodyB) {
console.log('collision');
});
Another way to do this is to add the collision event callback to the object itself.
var paddle = this.matter.add.image(400, 550, 'assets', 'paddle.png');
var paddle.setOnCollide(pair => {
// pair.bodyA
// pair.bodyB
});
See the documentation under enableCollisionEventsPlugin(): https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.MatterPhysics.html and also what a pair looks like: https://brm.io/matter-js/docs/files/src_collision_Pair.js.html#
You can also listen for specific collisions.
var paddle.setOnCollideWith(ball, pair => {
// Do something
});

Categories

Resources