Phaser: Gravity originating from a body - phaser-framework

I've added a body that should have gravity to my game, so picture a big empty screen with a circle for "Earth" in the middle.
What methods would let me have any other body added to the game be "accelerated" or "attracted" to this circle? Basically if an asteroid appears, it should keep it's initial velocity, but be affected by Earth's gravity.

I believe that I found this method that you're looking for here.
I also have an example of that method in action here.
Here is the source code for my example:
// Global constants
var GAME_WIDTH = 800;
var GAME_HEIGHT = 600;
var SHIP_X_POS = 100;
var SHIP_Y_POS = 200;
var PLANET_X_POS = 400;
var PLANET_Y_POS = 300;
var ACCELERATION_TOWARDS_PLANET = 500;
var SHIP_VELOCITY_X = 150;
var SHIP_VELOCITY_Y = 150;
// Global variables
var ship;
var planet;
var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", {preload: preload, create: create, update: update});
function preload () {
game.load.image("ship", "sprites/phaser_ship.png");
game.load.image("planet", "sprites/planet.png");
}
function create () {
var ship = game.add.sprite(SHIP_X_POS, SHIP_Y_POS, "ship");
game.physics.arcade.enable(ship);
ship.body.velocity.x = SHIP_VELOCITY_X;
ship.body.velocity.y = SHIP_VELOCITY_Y;
var planet = game.add.sprite(PLANET_X_POS, PLANET_Y_POS, "planet");
game.physics.arcade.enable(planet);
planet.body.immovable = true;
game.physics.arcade.accelerateToObject(ship, planet, ACCELERATION_TOWARDS_PLANET);
}
function update () {
// nothing to update
}

Related

Only sprites can be added to a group although it's a sprite

I'm trying to make a sketch in which a sprite animation appears when I click on another sprite. It appears on the middle of the screen and it should be able to be pushed by the mouse which also has a sprite attached to it.
As soon as I want to add the appearing-onMousePressed sprites to a group or to the mouseBlock.displace(), I get an error saying "Uncaught Error: overlap can only be checked between sprites or groups". I don't understand what I'm doing wrong. Is it because the sprites are created through a function? Or is my order of things wrong? Please help me.
var movingBlocks;
var mouseBlock;
var bb1;
var b1;
function preload() {
mouseBlock = loadImage('mouse.png');
}
function setup() {
createCanvas(windowWidth, windowHeight);
mouseBlock = createSprite(200,200);
mouseBlock.addAnimation('normal', 'mouse.png');
movingBlocks = new Group()
var b1 = createSprite(windowWidth-200,100);
b1.addAnimation('normal', 'stamps/static/BB1/1BuildingBlock0000.png','stamps/static/BB1/1BuildingBlock0001.png','stamps/static/BB1/1BuildingBlock0002.png','stamps/static/BB1/1BuildingBlock0003.png','stamps/static/BB1/1BuildingBlock0004.png','stamps/static/BB1/1BuildingBlock0005.png','stamps/static/BB1/1BuildingBlock0006.png','stamps/static/BB1/1BuildingBlock0007.png','stamps/static/BB1/1BuildingBlock0008.png','stamps/static/BB1/1BuildingBlock0009.png','stamps/static/BB1/1BuildingBlock0010.png','stamps/static/BB1/1BuildingBlock0009.png','stamps/static/BB1/1BuildingBlock0008.png','stamps/static/BB1/1BuildingBlock0007.png','stamps/static/BB1/1BuildingBlock0006.png','stamps/static/BB1/1BuildingBlock0005.png','stamps/static/BB1/1BuildingBlock0004.png','stamps/static/BB1/1BuildingBlock0003.png','stamps/static/BB1/1BuildingBlock0002.png','stamps/static/BB1/1BuildingBlock0001.png','stamps/static/BB1/1BuildingBlock0000.png');
b1.scale = 0.15;
b1.onMousePressed= function() {
var bb1 = createSprite(windowWidth/2,windowHeight/2);
bb1.addAnimation('normal', 'stamps/move/BB1Move/1BBMove0000.png','stamps/move/BB1Move/1BBMove0001.png','stamps/move/BB1Move/1BBMove0002.png','stamps/move/BB1Move/1BBMove0003.png','stamps/move/BB1Move/1BBMove0004.png','stamps/move/BB1Move/1BBMove0005.png','stamps/move/BB1Move/1BBMove0006.png','stamps/move/BB1Move/1BBMove0007.png','stamps/move/BB1Move/1BBMove0008.png','stamps/move/BB1Move/1BBMove0009.png','stamps/move/BB1Move/1BBMove0010.png','stamps/move/BB1Move/1BBMove0009.png','stamps/move/BB1Move/1BBMove0008.png','stamps/move/BB1Move/1BBMove0007.png','stamps/move/BB1Move/1BBMove0006.png','stamps/move/BB1Move/1BBMove0005.png','stamps/move/BB1Move/1BBMove0004.png','stamps/move/BB1Move/1BBMove0003.png','stamps/move/BB1Move/1BBMove0002.png','stamps/move/BB1Move/1BBMove0001.png','stamps/move/BB1Move/1BBMove0000.png');
tint(255,127);
bb1.scale = 0.4;
}
// movingBlocks.add(bb1);
}
function draw() {
background(240,240,240);
mouseBlock.position.x = mouseX;
mouseBlock.position.y = mouseY;
mouseBlock.scale=0.3;
// mouseBlock.displace(bb1);
drawSprites();
}
I've found it! I needed to change things about the order of my code. The place where I add a sprite to a group had to be relocated and then I could say mouseBlock.displace(movingBlocks);
var movingBlocks;
var mouseBlock;
var bb1;
var b1;
function preload() {
mouseBlock = loadImage('mouse.png');
}
function setup() {
createCanvas(windowWidth, windowHeight);
mouseBlock = createSprite(200,200);
mouseBlock.addAnimation('normal', 'mouse.png');
movingBlocks = new Group()
var b1 = createSprite(windowWidth-200,100);
b1.addAnimation('normal', 'stamps/static/BB1/1BuildingBlock0000.png','stamps/static/BB1/1BuildingBlock0001.png','stamps/static/BB1/1BuildingBlock0002.png','stamps/static/BB1/1BuildingBlock0003.png','stamps/static/BB1/1BuildingBlock0004.png','stamps/static/BB1/1BuildingBlock0005.png','stamps/static/BB1/1BuildingBlock0006.png','stamps/static/BB1/1BuildingBlock0007.png','stamps/static/BB1/1BuildingBlock0008.png','stamps/static/BB1/1BuildingBlock0009.png','stamps/static/BB1/1BuildingBlock0010.png','stamps/static/BB1/1BuildingBlock0009.png','stamps/static/BB1/1BuildingBlock0008.png','stamps/static/BB1/1BuildingBlock0007.png','stamps/static/BB1/1BuildingBlock0006.png','stamps/static/BB1/1BuildingBlock0005.png','stamps/static/BB1/1BuildingBlock0004.png','stamps/static/BB1/1BuildingBlock0003.png','stamps/static/BB1/1BuildingBlock0002.png','stamps/static/BB1/1BuildingBlock0001.png','stamps/static/BB1/1BuildingBlock0000.png');
b1.scale = 0.15;
b1.onMousePressed= function() {
var bb1 = createSprite(windowWidth/2,windowHeight/2);
bb1.addAnimation('normal', 'stamps/move/BB1Move/1BBMove0000.png','stamps/move/BB1Move/1BBMove0001.png','stamps/move/BB1Move/1BBMove0002.png','stamps/move/BB1Move/1BBMove0003.png','stamps/move/BB1Move/1BBMove0004.png','stamps/move/BB1Move/1BBMove0005.png','stamps/move/BB1Move/1BBMove0006.png','stamps/move/BB1Move/1BBMove0007.png','stamps/move/BB1Move/1BBMove0008.png','stamps/move/BB1Move/1BBMove0009.png','stamps/move/BB1Move/1BBMove0010.png','stamps/move/BB1Move/1BBMove0009.png','stamps/move/BB1Move/1BBMove0008.png','stamps/move/BB1Move/1BBMove0007.png','stamps/move/BB1Move/1BBMove0006.png','stamps/move/BB1Move/1BBMove0005.png','stamps/move/BB1Move/1BBMove0004.png','stamps/move/BB1Move/1BBMove0003.png','stamps/move/BB1Move/1BBMove0002.png','stamps/move/BB1Move/1BBMove0001.png','stamps/move/BB1Move/1BBMove0000.png');
tint(255,127);
bb1.scale = 0.4;
movingBlocks.add(bb1);
// mouseBlock.displace(bb1);
}
}
function draw() {
background(240,240,240);
mouseBlock.position.x = mouseX;
mouseBlock.position.y = mouseY;
mouseBlock.scale=0.3;
// for(var i=0; i<allSprites.length;i++){
// var block1 = allSprites[i];
// }
mouseBlock.displace(movingBlocks);
drawSprites();
}

Make zoom images slideshow on canvas

i am trying to making zoomin images slideshow using pixijs on canvas from three images like this
I tried but not succeed. My question in how to add zoomin or zoomout image in pixijs for specific width and height, then second image and so on.
I am writing this code
var pixiapp;
var pixiloader = PIXI.Loader.shared;
initpixiapp();
function initpixiapp() {
pixiapp = new PIXI.Application({ width: 1280, height: 720 });
document.getElementById('canvas-container').appendChild(pixiapp.view);
pixiloader.add('images/img1.png').add('images/img2.png').add('images/img3.png').load(handleimagesload);
}
function handleimagesload() {
var imagessprites=[]
var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture);
var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture);
var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture);
imagessprites.push(img1)
imagessprites.push(img2)
imagessprites.push(img3);
for (let index = 0; index < imagessprites.length; index++) {
const element = imagessprites[index];
pixiapp.stage.addChild(element);
// here will the the code to run zoom image to specific width and heigth and then move to next image,
// here is my code, its only display zooming third image
var ticker = new PIXI.Ticker();
ticker.add(() => {
console.log('ticker called')
element.width += 1;
element.height += 1;
if(element.width==1500)
{
ticker.stop()
}
})
ticker.start()
}
}
One more things, how to display a box with text for three seconds before slideshow start.
Try something like this:
var pixiapp;
var pixiloader = PIXI.Loader.shared;
initpixiapp();
function initpixiapp() {
pixiapp = new PIXI.Application({ width: 1280, height: 720 });
document.getElementById('canvas-container').appendChild(pixiapp.view);
pixiloader
.add('images/img1.png')
.add('images/img2.png')
.add('images/img3.png')
.load(handleimagesload);
}
function handleimagesload() {
var imagessprites = [];
var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture);
var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture);
var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture);
imagessprites.push(img1);
imagessprites.push(img2);
imagessprites.push(img3);
// Put first image on stage:
var currentImageIndex = 0;
var currentImage = imagessprites[currentImageIndex];
pixiapp.stage.addChild(currentImage);
var ticker = new PIXI.Ticker();
// Start "main animation loop":
ticker.add(() => {
currentImage.width += 1;
currentImage.height += 1;
if (currentImage.width >= 1500) {
// remove current image from stage:
pixiapp.stage.removeChild(currentImage);
// Move to next image:
// Increase index - but if it reached maximum then go back to 0 (to first image)
currentImageIndex++;
if (currentImageIndex >= imagessprites.length) {
currentImageIndex = 0;
}
currentImage = imagessprites[currentImageIndex];
// Set initial width and height of image (TODO: adjust this)
currentImage.width = 1000;
currentImage.height = 1000;
// put image on stage:
pixiapp.stage.addChild(currentImage);
}
});
ticker.start()
}

How to get access to sprite 2D context?

Is it possible to get the CanvasRenderingContext2D at a sprite level instead of the whole canvas?
Has anyone tried to have access for it? any idea?
I tried:
child.addEventListener(RenderEvent.RENDER_CANVAS, function(event)
{
var renderer:openfl.display.DisplayObjectRenderer = event.renderer;
var ctx:CanvasRenderingContext2D = renderer.context;
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
});
However, I am getting error:
openfl.display.DisplayObjectRenderer has no field context
How would I access the sprite’s CanvasRenderingContext2D ?
Try this casting the renderer to a CanvasRenderer:
child.addEventListener(RenderEvent.RENDER_CANVAS, function(event)
{
var renderer:openfl.display.CanvasRenderer = cast(event.renderer);
var ctx:CanvasRenderingContext2D = renderer.context;
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
});

How to get individual object's width, height, left and top in selection:created event?

I am getting the values of the properties of an object(top,width...) as an object is being scaled/moved by using this function :
canvas.on('object:scaling', onObjectModification);
canvas.on('object:moving', onObjectModification);
canvas.on('object:rotating', onObjectModification);
function onObjectModification(e) {
var activeObject = e.target;
var reachedLimit = false;
objectLeft = activeObject.left,
objectTop = activeObject.top,
objectWidth = activeObject.width,
objectHeight = activeObject.height,
canvasWidth = canvas.width,
canvasHeight = canvas.height;
}
How can I get the same for each object that are being moved as a group? I need the values to be constantly changing as the object:scaling event provide.
I know of the event selection:created but I am lost how to use that to attain what I want. Any help from you guys would be highly appreciated.
Thanks
during object scaling width and height will not change. They will be the same all the time, just scaleX and scaleY will change.
You have to write a function that will iterate on possibile group sub objects.
canvas.on('object:scaling', onObjectModification);
canvas.on('object:moving', onObjectModification);
canvas.on('object:rotating', onObjectModification);
function onObjectModification(e) {
var activeObject = e.target;
if (!activeObject) {
return;
}
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var reachedLimit = false;
var objectLeft = activeObject.left;
var objectTop = activeObject.top;
// this provide scaled height and width
var objectWidth = activeObject.getWidth();
var objectHeight = activeObject.getHeight();
if (activeObject._objects) {
objs = activeObject._objects;
for (var i= 0; i < objs.length; i++) {
var obj = objs[i];
var objWidth = activeObject.getWidth() * activeObject.scaleX;
var objHeight = activeObject.getHeight() * activeObject.scaleY;
}
}
}

How can I remove all SVG elements which do not intersect a particular rectangle?

I have an SVG image from which I'd like to extract several rectangular regions as independent SVG images. Because the original image is rather large but the elements intersecting the areas of interest are small, I do not want elements which lie entirely outside the cropped viewBox to remain in the cropped SVG image.
Conceptually, what I'm looking for is this:
The cropped SVG (yes, the output must be SVG, not a bitmap) should not contain elements for the spiral or the star, as they fall entirely outside the area of interest. (Yes, the nonintersecting elements really must be removed, due to the source SVG being several orders of magnitude more bytes than the cropped SVG, as I intend to crop the source in different ways hundreds of times.) I want to be able to specify the area of interest on the command-line, as well, due to having quite a number of such cropped images to produce.
Are there any tools which can do this?
SVG elements can be parsed and flagged true/false as inside a svg rect object and/or intersecting the rect object.
Would this work for you?
isEnclosed = mySVG.checkEnclosure(myElement, RectObj)
doesIntersect = mySVG.checkIntersection(myElement, RectObj)
I use the Jordan Curve Theorem to test for points inside an svg polygon. Your polygon would be your viewBox. Posssibly this could work for you if each element has a target point associated with it(i.e. center point) to determine if you want to show it or not.
The following is the javascript I use:(caution: I think the polygon should have counter-clockwise points. Always a good idea when dealing with polygons)
//---Point-in-polygon: Jordan Curve Theorem---
function pointInPolygon(myPolygon,px,py)
{
var pointsList=myPolygon.points
var x
var y
var x1
var y1
var crossings=0
var verts=pointsList.numberOfItems
//---Iterate through each line ---
for ( var i = 0; i < verts; i++ )
{
var vertx=pointsList.getItem(i).x
var verty=pointsList.getItem(i).y
if(i<verts-1)
{
var vertxNext=pointsList.getItem(i+1).x
var vertyNext=pointsList.getItem(i+1).y
}
else
{
var vertxNext=pointsList.getItem(0).x
var vertyNext=pointsList.getItem(0).y
}
/* This is done to ensure that we get the same result when
the line goes from left to right and right to left */
if ( vertx < vertxNext){
x1 = vertx;
x2 = vertxNext;
} else {
x1 = vertxNext;
x2 = vertx;
}
/* First check if the ray is possible to cross the line */
if ( px > x1 && px <= x2 && ( py < verty || py <= vertyNext ) ) {
var eps = 0.000000001;
/* Calculate the equation of the line */
var dx = vertxNext - vertx;
var dy = vertyNext - verty;
var k;
if ( Math.abs(dx) < eps ){
k = Infinity;
} else {
k = dy/dx;
}
var m = verty - k * vertx;
/* Find if the ray crosses the line */
y2 = k * px + m;
if ( py <= y2 ){
crossings++;
}
}
}
//---odd number of crossings: point inside polygon--
var crossFlag=(crossings/2)+""
if(crossFlag.indexOf(".")!=-1)
return true;
else
return false;
}
Since your svg elements are transformed, you may need to convert them to screen points. I've used the following javascript for the various svg elements(line, rect, circle, ellipse, polygon, polyline, and path)
//----build a generic document SVG root to hold svg point---
function screenLine(line,svg)
{
var sCTM = line.getCTM()
var x1=parseFloat(line.getAttribute("x1"))
var y1=parseFloat(line.getAttribute("y1"))
var x2=parseFloat(line.getAttribute("x2"))
var y2=parseFloat(line.getAttribute("y2"))
var mySVGPoint1 = svg.createSVGPoint();
mySVGPoint1.x = x1
mySVGPoint1.y = y1
mySVGPointTrans1 = mySVGPoint1.matrixTransform(sCTM)
line.setAttribute("x1",mySVGPointTrans1.x)
line.setAttribute("y1",mySVGPointTrans1.y)
var mySVGPoint2 = svg.createSVGPoint();
mySVGPoint2.x = x2
mySVGPoint2.y = y2
mySVGPointTrans2= mySVGPoint2.matrixTransform(sCTM)
line.setAttribute("x2",mySVGPointTrans2.x)
line.setAttribute("y2",mySVGPointTrans2.y)
//---force removal of transform--
line.setAttribute("transform","")
line.removeAttribute("transform")
}
function screenCircle(circle,svg)
{
var sCTM = circle.getCTM()
var scaleX = sCTM.a;
var cx=parseFloat(circle.getAttribute("cx"))
var cy=parseFloat(circle.getAttribute("cy"))
var r=parseFloat(circle.getAttribute("r"))
var mySVGPointC = svg.createSVGPoint();
mySVGPointC.x = cx
mySVGPointC.y = cy
mySVGPointTransC = mySVGPointC.matrixTransform(sCTM)
circle.setAttribute("cx",mySVGPointTransC.x)
circle.setAttribute("cy",mySVGPointTransC.y)
circle.setAttribute("r",r*scaleX)
//---force removal of transform--
circle.setAttribute("transform","")
circle.removeAttribute("transform")
}
function screenEllipse(ellipse,svg)
{
var sCTM = ellipse.getCTM()
var scaleX = sCTM.a;
var scaleY = sCTM.d;
var cx=parseFloat(ellipse.getAttribute("cx"))
var cy=parseFloat(ellipse.getAttribute("cy"))
var rx=parseFloat(ellipse.getAttribute("rx"))
var ry=parseFloat(ellipse.getAttribute("ry"))
var mySVGPointC = svg.createSVGPoint();
mySVGPointC.x = cx
mySVGPointC.y = cy
mySVGPointTransC = mySVGPointC.matrixTransform(sCTM)
ellipse.setAttribute("cx",mySVGPointTransC.x)
ellipse.setAttribute("cy",mySVGPointTransC.y)
ellipse.setAttribute("rx",rx*scaleX)
ellipse.setAttribute("ry",ry*scaleY)
//---force removal of transform--
ellipse.setAttribute("transform","")
ellipse.removeAttribute("transform")
}
function screenRect(rect,svg)
{
var sCTM = rect.getCTM()
var scaleX = sCTM.a;
var scaleY = sCTM.d;
var x=parseFloat(rect.getAttribute("x"))
var y=parseFloat(rect.getAttribute("y"))
var width=parseFloat(rect.getAttribute("width"))
var height=parseFloat(rect.getAttribute("height"))
var mySVGPoint = svg.createSVGPoint();
mySVGPoint.x = x
mySVGPoint.y = y
mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
rect.setAttribute("x",mySVGPointTrans.x)
rect.setAttribute("y",mySVGPointTrans.y)
rect.setAttribute("width",width*scaleX)
rect.setAttribute("height",height*scaleY)
//---force removal of transform--
rect.setAttribute("transform","")
rect.removeAttribute("transform")
}
function screenPolyline(myPoly,svg)
{
var sCTM = myPoly.getCTM()
var pointsList = myPoly.points;
var n = pointsList.numberOfItems;
for(var m=0;m<n;m++)
{
var mySVGPoint = mySVG.createSVGPoint();
mySVGPoint.x = pointsList.getItem(m).x
mySVGPoint.y = pointsList.getItem(m).y
mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
pointsList.getItem(m).x=mySVGPointTrans.x
pointsList.getItem(m).y=mySVGPointTrans.y
}
//---force removal of transform--
myPoly.setAttribute("transform","")
myPoly.removeAttribute("transform")
}
function screenPath(path,svg)
{
var sCTM = path.getCTM()
var scaleX = sCTM.a;
var scaleY = sCTM.d;
var segList=path.pathSegList
var segs=segList.numberOfItems
//---change segObj values
for(var k=0;k<segs;k++)
{
var segObj=segList.getItem(k)
if(segObj.x && segObj.y )
{
var mySVGPoint = svg.createSVGPoint();
mySVGPoint.x = segObj.x
mySVGPoint.y = segObj.y
mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
segObj.x=mySVGPointTrans.x
segObj.y=mySVGPointTrans.y
}
if(segObj.x1 && segObj.y1)
{
var mySVGPoint1 = svg.createSVGPoint();
mySVGPoint1.x = segObj.x1
mySVGPoint1.y = segObj.y1
mySVGPointTrans1 = mySVGPoint1.matrixTransform(sCTM)
segObj.x1=mySVGPointTrans1.x
segObj.y1=mySVGPointTrans1.y
}
if(segObj.x2 && segObj.y2)
{
var mySVGPoint2 = svg.createSVGPoint();
mySVGPoint2.x = segObj.x2
mySVGPoint2.y = segObj.y2
mySVGPointTrans2 = mySVGPoint2.matrixTransform(sCTM)
segObj.x2=mySVGPointTrans2.x
segObj.y2=mySVGPointTrans2.y
}
if(segObj.r1)segObj.r1=segObj.r1*scaleX
if(segObj.r2)segObj.r2=segObj.r2*scaleX
}
//---force removal of transform--
path.setAttribute("transform","")
path.removeAttribute("transform")
}
//---changes all transformed points to screen points---
function screenPolygon(myPoly,mySVG)
{
var sCTM = myPoly.getCTM()
var pointsList = myPoly.points;
var n = pointsList.numberOfItems;
for(var m=0;m<n;m++)
{
var mySVGPoint = mySVG.createSVGPoint();
mySVGPoint.x = pointsList.getItem(m).x
mySVGPoint.y = pointsList.getItem(m).y
mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
pointsList.getItem(m).x=mySVGPointTrans.x
pointsList.getItem(m).y=mySVGPointTrans.y
}
//---force removal of transform--
myPoly.setAttribute("transform","")
myPoly.removeAttribute("transform")
}

Resources