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";
});
Related
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();
}
I am using the below code to share the file/image to other apps using xamarin ios. But it is not working properly. No exceptions. Code executing properly. But the app list is not launching. What is an issue in below code? Do we need to do any configuration settings changes in the project?
var documentName = shortName + ".pdf";
var ContentPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
var fullFilename = Path.Combine(ContentPath, documentName);
NSData dataToShare = NSFileManager.DefaultManager.Contents(fullFilename);
var items = new NSObject[] { dataToShare };
var controller = new UIActivityViewController(items, null);
UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(controller, true, null);
I'm using this code and it is working properly:
var url = NSUrl.FromFilename(this.filePath);
var item = url.Copy();
var activityItems = new[] { item };
var activityController = new UIActivityViewController(activityItems, null);
float width = (float)this.PdfView.Frame.Width;
float height = (float)this.PdfView.Frame.Height;
UIPopoverController popoverController = new UIPopoverController(activityController);
popoverController.SetPopoverContentSize(new CGSize(width, height), true);
popoverController.PresentFromRect(new CGRect(0, 0, width, height), this.MainView, 0, true);
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;
}
}
}
After reading a lot in order to manipulate the position of the ports, I found another problem: when I select a port that is positioned below the figure, as shown in the images.
My question is: How can I keep the ports on the top of the figure?
This is my code:
var leftLocator = new draw2d.layout.locator.InputPortLocator();
var rightLocator = new draw2d.layout.locator.OutputPortLocator();
leftLocator.relocate = function(index, figure) {
var width = figure.getParent().getWidth();
var height = figure.getParent().getHeight();
var x = width / 4;
var y = height / 2;
figure.setPosition(x, y);
}
rightLocator.relocate = function(index, figure) {
var width = figure.getParent().getWidth();
var height = figure.getParent().getHeight();
var x = width * 3 / 4;
var y = height / 2;
figure.setPosition(x, y);
}
elemento.createPort("input", leftLocator);
elemento.createPort("output", rightLocator);
I found a solution using the "toFront" method at onDragStart event:
OutputPortFigure = draw2d.OutputPort.extend({
NAME: 'OutputPortFigure',
init: function() { ... },
onMouseEnter: function() { ... },
onMouseLeave: function() { ... },
onDragStart: function(x, y, shiftKey, ctrlKey) {
this._super(x, y, shiftKey, ctrlKey);
this.toFront(this.getParent());
},
});
I was having the same problem with some of my figures.
I found a solution that can help but it's not the best one i think.
I create a hidden figure that holds the Ports (Implement repaint method to re-size the child figure when the parent one changes)
var Hidden = draw2d.SetFigure.extend({
NAME: "Hidden",
init : function()
{
this._super();
this.addPort(new draw2d.InputPort('port1'), new draw2d.layout.locator.InputPortLocator());
this.addPort(new draw2d.OutputPort('port2'), new draw2d.layout.locator.OutputPortLocator());
this.setDimension(300,150);
this.setAlpha(0);
},
onDoubleClick: function(){
}
});
var Test = draw2d.SetFigure.extend({
NAME: "Test",
init : function()
{
this._super();
this.hidden = new Hidden();
this.addFigure(this.hidden, new draw2d.layout.locator.CenterLocator(this));
this.setAlpha(0.8);
this.setDimension(300,150);
this.setRadius(10);
this.setStroke(3);
this.label.setColor("#0d0d0d");
this.label.setFontColor("#0d0d0d");
this.addFigure(this.label, new draw2d.layout.locator.CenterLocator(this));
this.tooltip = null;
},
repaint: function(attributes){
this._super(attributes);
if(this.hidden != undefined) this.hidden.setDimension(this.getWidth(), this.getHeight());
},
onDoubleClick: function(){
}
});
if you have a better solution i'll be happy to see it :)
i discovered this when i was implementing a figure that can have a loop connexion
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
}