Im trying to change the background in a phaser game once the player reaches a score of 50 or any number really, the back is a png. Is this possible?
this is my code:
this.backgroundGame = this.game.add.tileSprite(0, 0, 800, 600, 'background');
if (this.score == 3)
this.backgroundGame = this.game.add.tileSprite(0, 0, 800, 600, 'background1');
But this is surely not working at all, it kind of brings background1 and covers the whole game if I include the if in the update function, and if I include it on the create function it is just ignored. Any advise? Sorry I'm a newbie and still learning. Also English is not my first language so if my question is not clear let me know thanks.
You can load in preload() method all background do you need.
this.game.load.image('background', 'images/bg1.png');
this.game.load.image('background2', 'images/bg2.png');
Later add to game one sprite like background:
this.backgroundSprite = this.game.add.tileSprite(0, 0, 800, 600, 'background');
this.backgroundSprite = this.game.add.sprite(0, 0,'background');
And when will be right time:
if (this.score == 3)
this.backgroundSprite.loadTexture('background1');
You will have better performance when you not allways add new object to game word.
In create method you have to set both (or many as you want) backgrounds. As in Phaser layers are like in CSS, the original background (the first of them) has to be the last in create:
--- Create:
this.background2 = this.game.add.tileSprite(0, 0, 800, 600, 'background1');
this.backgroundOriginal = this.game.add.tileSprite(0, 0, 800, 600, 'background');
Then in update, when your condition is true, you have to set alpha = 0 (invisible) to the original background and the layer behind will be visible.
--- Update:
if(this.score == 3) {
this.backgroundOriginal.alpha = 0;
}
PD.: My english is not enough good too... pero supongo que el inglés españolizado si lo entiendes bien, ¿no Rafa? ;)
Related
The plan was very simple: Using MouseEvent.CLICK to hide/show a Sprite. The first click should make it disappear, the second make it visible again.
What actually happened was really odd, as the Sprite didn't become visible when alpha was set to 1 (unless I zoom in or open the Settings menu). Here's an example: http://www.fastswf.com/8BuuY14
private function doStuff(e:MouseEvent):void {
(e.target.alpha == 1) ? e.target.alpha = 0 : e.target.alpha = 1;
}
//Sprite on the left
var outter:Sprite = new Sprite(); //Container sprite (gray background)
outter.x = outter.y = 20;
outter.opaqueBackground = 0xCCCCCC;
outter.addEventListener(MouseEvent.CLICK, doStuff);
var inner:Sprite = new Sprite(); //Interactive child (red square)
inner.graphics.beginFill(0xFF0000);
inner.graphics.drawRect(0, 0, 50, 50);
var speck:Shape = new Shape(); //Reference child (tiny black square)
speck.graphics.beginFill(0x000000);
speck.graphics.drawRect(50, 50, 5, 5);
outter.addChild(inner);
outter.addChild(speck);
addChild(outter);
//Sprite on the right
var cont:Sprite = new Sprite();
cont.x = 100; cont.y = 20;
cont.graphics.beginFill(0xFF0000);
cont.graphics.drawRect(0, 0, 50, 50);
cont.addEventListener(MouseEvent.CLICK, doStuff);
addChild(cont);
I did manage to make it work, by using alpha values equal to or larger than 0.0078125 (in true alpha value), but not 0. Why is this happening?
[EDIT]
Since I established the error could be caused by my IDE, I requested help also at the FlashDevelop community (see comments for link).
After many tests ( on windows 7 with firefox, chrome and IE ), I can confirm that the "problem" ( the abnormal behavior, at least ) is linked to these factors :
Using a MovieClip, Sprite or a Shape ( and some other objects ).
The wmode ( when used ) : direct and gpu.
The Flash Player version : ActiveX, NPAPI and Standalone for the version 14 and up.
I think that's like the Flash Player is "ignoring" to render the object may be for a performance issue that's doing that ( not rendering the object when its alpha is 0 from the 1st time ), because sometimes when I used a Button or CheckBox, ... and I rollover it, a Event.RENDER event is fired on the object and the code is working one time. I saw also that the code is working when executing it for two objects in the same time ...
So to avoid that behavior, you can use the cacheAsBitmap property :
object.cacheAsBitmap = true;
You can also using a ColorTransform object when setting the alpha :
object.transform.colorTransform = new ColorTransform(1, 1, 1, (object.alpha == 1 ? 0 : 1), 0, 0, 0, 1);
Or simply, avoid to use the direct or gpu wmodes ...
Hope that can help.
I have a problem. I have a sprite added to library and I linked and named its class "CarriedHead_Normal". Now I want to display this sprite and make every black(000000) pixel invisible (just convert background to alpha).
I know I can use this
var bmpd:BitmapData = new BitmapData(width, height, true, 0x000000)
But how am I supposed to merge this with my function, so I call the class from the library and make it's bg transparent?
My current code:
var imageSprite = new Sprite();
addChild(imageSprite);
var libraryImage:Bitmap = new Bitmap(new CarriedHead_Normal(0, 0))
imageSprite.addChild(libraryImage);
Thanks in advance.
A number of ways you could do it, some working better than others:
On a side node, your question title has nothing to do with your actual question
1) Use blend modes
Depending on your graphics and background, you might be able to get away with a simple blendMode - check out BlendMode.SCREEN in particular. Note that some blend modes require that your parent container have a blendMode of BlendMode.LAYER
2) copyPixels() using an alpha BMD
copyPixels() lets you specify an alpha BitmapData to use when deciding which pixels to copy over (actually the alpha value of the pixels to copy over). If you have an alpha BitmapData that matches your black areas, you can remove it like that:
var b:BitmapData = new BitmapData( myImageBMD.width, myImageBMD.height, true, 0x00000000 );
b.copyPixels( myImageBMD, myImageBMD.rect, new Point, alphaBMD, new Point, false ); // copy our image, using alphaBMD to remove the black
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#copyPixels()
3) floodFill() the black areas
If your black area is continuous and you know a pixel that it starts on (e.g. it's a black frame around an image), then you can use floodFill() to remove the black areas
var b:BitmapData = new BitmapData( myImageBMD.width, myImageBMD.height, true, 0x00000000 );
b.copyPixels( myImageBMD, myImageBMD.rect, new Point ); // copy our image so we keep the original
b.floodFill( 0, 0, 0x00000000 ); // assuming the first pixel is black, floodFill() from here, replacing with transparence
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#floodFill()
This technique will work best on pixel art, where the edges are well defined.
4) threshold() to remove the black
threshold() takes pixel values and replaces them with the value you set if they pass a certain test (<, <=, ==, etc). You can use this to replace black with transparence.
var b:BitmapData = new BitmapData( myImageBMD.width, myImageBMD.height, true, 0x00000000 );
b.copyPixels( myImageBMD, myImageBMD.rect, new Point ); // copy our image so we keep the original
b.threshold( b, b.rect, new Point, "==", 0xff000000, 0x00000000 ); // test the pixels; if they're black, replace with transparence
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#threshold()
Again, this works best when the edges are well defined.
5) Use filters
You can use applyFilter() to create a new image, using a BitmapFilter to remove the black. Possibly only of the other filters will work, but ShaderFilter should definitely do the job (you write your own shader, so you can essentially do what you want). I don't have any real experience with filters, so I can't tell you how they work, but some googling should give you the necessary code
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#applyFilter()
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/ShaderFilter.html
6) Use photoshop (or equivalent)
The easiest method; just edit your image to remove the black; much less hassle :)
Try something like:
var libraryImage:Bitmap = spriteToBitmap(new CarriedHead_Normal());
imageSprite.addChild(libraryImage);
function spriteToBitmap(sprite:Sprite, smoothing:Boolean = false):Bitmap
{
var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00000000);
bitmapData.draw(sprite);
bitmapData.threshold(bitmapData, bitmapData.rect, new Point(), '==', 0xff000000, 0x00000000);
return new Bitmap(bitmapData, "auto", smoothing);
}
local rect = display.newRect(100, 100, 100, 100)
local moving, moving2
function moving()
transition.to(rect, {time=500, x=300, y=100, onComplete=moving2})
end
function moving2()
transition.to(rect, {time=500, x=100, y=300, onComplete=moving})
end
Hi everyone. I'm a newbie to Lua, so I would like know why my rectangle is not moving on my screen with this function? When I use only this code below, it moves but stops at the end. I'd like it to repeatedly move from one side to the other:
local rect = display.newRect(100, 100, 100, 100)
transition.to(rect, {time=500, x=300, y=100, onComplete=moving2})
You need to call one of the functions. Just put:
moving()
as the last line.
Like they said, it's not moving because you don't call
moving()
or
moving2()
in your code.
Just so you know, you don't have do this complicated stuff with two different functions in the onComplete parameter. You can have the same effect on your object with one transition by changing it's easing function and setting the iterations parameter to -1 for an infinite loop.
Here is a list of the available easing functions : http://docs.coronalabs.com/api/library/easing/index.html, as you can see the easing.continuousLoop function will do what you want.
You can try something like this instead :
local rect = display.newRect(100, 300, 100, 100)
transition.to(rect, {
time = 500,
x = 300,
y = 100,
iterations = -1,
transition = easing.continuousLoop,
})
after putting at the end
moving()
it works fine. already tested it. or you may start by
moving2()
thanks everyone, it works well putting moving () at the end
I've tried quickly the last code with easing.continuousLoop but it was not working exactly as i want, but i gonna check it deeply later because it could be helpful
Anyway thanks all
Oh man, using a local object and calling it from both transitions is at some point going to cause a serious error, using your existing code pass the "rect" to each transition so it doesn't get nabbed by "still in transition."
local rect = display.newRect(100, 100, 100, 100)
local moving, moving2
function moving(inObj)
if (inObj == nil) then inObj = rect end
transition.to(inObj, {time=500, x=300, y=100, onComplete = function(iObj)
moving2(iObj)
end})
end
function moving2(inObj)
transition.to(inObj, {time=500, x=100, y=300, onComplete, onComplete = function(iObj)
moving(iObj)
end})
end
OR
if you just want to be lazy :)
local rect = display.newRect(100, 100, 100, 100)
local movingIndex = 0
local moveData = {
{time = 500, x = 300, y = 100},
{time = 500, x = 300, y = 100}
}
function MoveObject(inObj)
movingIndex = movingIndex + 1
if (movingIndex > #moveData) then movingIndex = 1 end
transition.to(inObj, {tag = "movingObjects", time=moveData[movingIndex].time, x=moveData[movingIndex].x, y=moveData[movingIndex].y, onComplete = function(iObj)
MoveObject(iObj)
end})
end
MoveObject(rect)
That way you just have one function and can just add animation points to the moveData table :)
By tagging the transition with tag = "movingObjects" we can pause and resume any running transition with just one call like transition.pause("movingObjects") or cancel etc. useful when you want to pause and/or are moving to another see without having to wait for a transition to end or by wrapping it in a pcall()
Just food for thought :)
btw:: I didn't test the code above I just wrote it in this editor so may have 1 or two things that need tweeeking.
Does anyone know how to create a SVG depicting a column with a filling of my choice?
For example how to create a svg like this without having to create manually all the filling lines?:
You could create an image (for example) 10x10 with a red background en a diagonal stroke and repeat the image?
Called a pattern
Here a small example
var paper = Raphael(0, 0, 100, 1000);
var rectangle = paper.rect(0, 0, 100, 1000);
rectangle.attr({
"fill": "url(your/image.jpg)"
});
http://jsfiddle.net/YhDsD/
If you define a shadow ONCE, then it applies to all "graphics" on the canvas from thereon after (which is what it's supposed to do).
Sample:
http://flanvas.com/development/flanvas/test.html
Does anyone know best practice to turn the shadow off after you've used it? I'm setting shadowColor to "rgba(0,0,0,0)" which is a no-alpha black. I'm sure there is a better way.
case sample: The text is also getting a shadow. I'm using the no-alpha black to combat this for now.
http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html
By using save, translate and restore you can perform your tasks without worrying about the style changes, for eg.
ctx.save();
ctx.translate(X,Y);
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// do some stuff
ctx.restore();
here X & Y are the co-ordinates where you intended to draw and you do your stuff relative to the co-ordinates 0,0.
This method solves the problem of caching and restoring the previous styles/values and is also very helpful when you work with gradients as they are always plotted relative to the origin (0,0)
(EDIT: Oops! I see that's what you were already doing with a 0 alpha black.)
This is what you were looking for:
context.shadowColor = "transparent";
It's usually a good idea to store the old value of these kind of "global" attributes before you change it and use this stored value to restore it later on. Example:
var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// ... do some stuff
ctx.shadowColor = origShadowColor;
I created a function i can call to reset the shadow if needed.
resetShadow() {
this.ctx.shadowOffsetX = 0;
this.ctx.shadowOffsetY = 0;
this.ctx.shadowColor = "transparent";
}