Only sprites can be added to a group although it's a sprite - 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();
}
Related
freeDrawingBrush.onMouseMove fix x or y to draw only straight line
I am trying to draw a straight line making x fix using freeDrawingBrush.
For example:
canvas.isDrawingMode = 1;
canvas.freeDrawingBrush.color = "purple";
canvas.freeDrawingBrush.width = 10;
canvas._onMouseMoveInDrawingMode = function (e) {
var pointer = canvas.getPointer(e);
pointer.x = 100;
this.freeDrawingBrush.onMouseMove(pointer);
}
this doing the work but it is drawing continuously on mousemove. I want user to be able to draw multiple lines at a fix (for e.g.) x=100 at distances on y-axis.
Update:
I added following code :
canvas._onMouseUpInDrawingMode = function (e) {
this._isCurrentlyDrawing = false;
//canvas.selection = true;
canvas.isDrawingMode = 0;
this.freeDrawingBrush.onMouseUp();
this._handleEvent(e, 'up');
}
This stops drawing continuously but new problem raised. When I enable drawing mode again and try to draw new line it also add previous line to new line
After a lot of research I found the way:
var brush = new fabric.PencilBrush(canvas);
canvas.isDrawingMode = 1;
brush.width = 10;
canvas._onMouseMoveInDrawingMode = function (e) {
var pointer = canvas.getPointer(e);
pointer.x = 100;
brush.onMouseDown({x:pointer.x, y:pointer.y});
}
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;
}
}
}
Move the sprite but don't collide with other sprites in the scene in Phaser
I'm referring to the official example on Phaser.io site, but have copied it here for reference below. What I want, and repeatedly fail to achieve is that the moving (with keyboard keys) starfield sprite would not collide with other vegies sprites.
I did go through the docs and looked here on SO and their forum, and it seems that the solutions should be easy enough; to just put the following code in the update() function:
game.world.bringToTop(sprite);
But, for some reason this is not working for me, so please tell me what I'm doing wrong.
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/skies/sky4.png');
game.load.image('starfield', 'assets/misc/starfield.jpg');
game.load.spritesheet('veggies', 'assets/sprites/fruitnveg64wh37.png', 64, 64);
}
var sprite;
var cursors;
var veggies;
function create() {
game.add.image(0, 0, 'sky');
// Enable p2 physics
game.physics.startSystem(Phaser.Physics.P2JS);
// Make things a bit more bouncey
game.physics.p2.defaultRestitution = 0.8;
// Add a sprite
sprite = game.add.tileSprite(300, 450, 200, 50, 'starfield');
// Enable if for physics. This creates a default rectangular body.
game.physics.p2.enable(sprite);
veggies = game.add.group();
veggies.enableBody = true;
veggies.physicsBodyType = Phaser.Physics.P2JS;
var vegFrames = [ 1, 3, 4, 8 ];
for (var i = 0; i < 10; i++)
{
var veg = veggies.create(game.world.randomX, game.world.randomY, 'veggies', game.rnd.pick(vegFrames));
veg.body.setCircle(26);
}
text = game.add.text(20, 20, 'move with arrow keys', { fill: '#ffffff' });
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
sprite.body.setZeroVelocity();
game.world.bringToTop(veggies);
if (cursors.left.isDown)
{
sprite.body.moveLeft(400);
sprite.tilePosition.x -= 8;
}
else if (cursors.right.isDown)
{
sprite.body.moveRight(400);
sprite.tilePosition.x += 8;
}
if (cursors.up.isDown)
{
sprite.body.moveUp(400);
sprite.tilePosition.y -= 8;
}
else if (cursors.down.isDown)
{
sprite.body.moveDown(400);
sprite.tilePosition.y += 8;
}
}
edit: Solution which worked in the end thanks to SirSandman's answer:
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('stars', 'assets/misc/starfield.jpg');
game.load.spritesheet('ship', 'assets/sprites/humstar.png', 32, 32);
game.load.image('panda', 'assets/sprites/spinObj_01.png');
game.load.image('sweet', 'assets/sprites/spinObj_06.png');
}
var ship;
var starfield;
var cursors;
function create() {
// Enable P2
game.physics.startSystem(Phaser.Physics.P2JS);
// Turn on impact events for the world, without this we get no collision callbacks
game.physics.p2.setImpactEvents(true);
game.physics.p2.restitution = 0.8;
// Create our collision groups. One for the player, one for the pandas
var playerCollisionGroup = game.physics.p2.createCollisionGroup();
var pandaCollisionGroup = game.physics.p2.createCollisionGroup();
// This part is vital if you want the objects with their own collision groups to still collide with the world bounds
// (which we do) - what this does is adjust the bounds to use its own collision group.
game.physics.p2.updateBoundsCollisionGroup();
starfield = game.add.tileSprite(0, 0, 800, 600, 'stars');
starfield.fixedToCamera = true;
var pandas = game.add.group();
pandas.enableBody = true;
pandas.physicsBodyType = Phaser.Physics.P2JS;
for (var i = 0; i < 4; i++)
{
var panda = pandas.create(game.world.randomX, game.world.randomY, 'panda');
panda.body.setRectangle(40, 40);
// Tell the panda to use the pandaCollisionGroup
panda.body.setCollisionGroup(pandaCollisionGroup);
// Pandas will collide against themselves and the player
// If you don't set this they'll not collide with anything.
// The first parameter is either an array or a single collision group.
panda.body.collides(pandaCollisionGroup);
panda.body.velocity.x = 500;
panda.body.velocity.y = 500;
}
// Create our ship sprite
ship = game.add.sprite(200, 200, 'ship');
ship.scale.set(2);
ship.smoothed = false;
ship.animations.add('fly', [0,1,2,3,4,5], 10, true);
ship.play('fly');
game.physics.p2.enable(ship, false);
ship.body.setCircle(28);
ship.body.fixedRotation = true;
// Set the ships collision group
ship.body.setCollisionGroup(playerCollisionGroup);
// The ship will collide with the pandas, and when it strikes one the hitPanda callback will fire, causing it to alpha out a bit
// When pandas collide with each other, nothing happens to them.
game.camera.follow(ship);
cursors = game.input.keyboard.createCursorKeys();
}
function hitPanda(body1, body2) {
// body1 is the space ship (as it's the body that owns the callback)
// body2 is the body it impacted with, in this case our panda
// As body2 is a Phaser.Physics.P2.Body object, you access its own (the sprite) via the sprite property:
body2.sprite.alpha -= 0.1;
}
function update() {
ship.body.setZeroVelocity();
if (cursors.left.isDown)
{
ship.body.moveLeft(200);
}
else if (cursors.right.isDown)
{
ship.body.moveRight(200);
}
if (cursors.up.isDown)
{
ship.body.moveUp(200);
}
else if (cursors.down.isDown)
{
ship.body.moveDown(200);
}
if (!game.camera.atLimit.x)
{
starfield.tilePosition.x += (ship.body.velocity.x * 16) * game.time.physicsElapsed;
}
if (!game.camera.atLimit.y)
{
starfield.tilePosition.y += (ship.body.velocity.y * 16) * game.time.physicsElapsed;
}
}
function render() {
game.debug.text('Collide with the Pandas!', 32, 32);
}
I P2 you have to set the Collisiongroups in contrast to arcarde. I think you have to set a collisiongroup for the sprite like that: var veggCollisionGroup = game.physics.p2.createCollisionGroup(); and then define with which other groups this group shell collide like that in the Loop: veggies.body.setCollisionGroup(veggCollisionGroup); veggies.body.collides(veggCollisionGroup); And then the your tilesprite should collide with your other tilesprites. Source: http://phaser.io/examples/v2/p2-physics/collision-groups if i should be wrong you will find your answer in the examples. :)
Phaser: Gravity originating from a body
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
}