I could really need some help here. I'm trying to create a simple image-fliping-app that looks something like this: http://www.skistar.com/sv/Are/Skidskola/Skistar-Experience/om/
My app, just like this one, loads it's images dynamically (using XML). My app will only contain 4 fliping objects (i.e. 8 images).
Has anybody some guidance or code for that matter that I can study to get this working?
That would be really sweet! :-)
// Nicke
img.scaleX = -1;
img.scaleY = -1;
you can fake the flipping with a simple scaleX scaling. Basically you've got the two images on top of each other and when the mouse is over them you scale down the visible one and when it's scaleX value equals 0, you start scaling up the other image. The reference point of the images should be centered.
I will try to give you an example but a bit busy at the moment.
Hope it helps,
Rob
Related
I would like to create some mouse interactions on several moving planes and for that, I need to know which planes I'm hovering on. I've implemented the Raycasting method like in your example here but it seems like I'm hovering all my planes in the center of the canvas, just like if the raycasting method wasn't considering my position.set() modifications.
You can see here an example of what I did here, I logged the result of the hits array at the end of the canvasSlider.js file and all planes are logging when hovering in the center.
Is there a way around that? Or I'm I doing something wrong? Thanks a lot.
The main issue is that you are setting the z scale to 0.
plane.scale.set(1, size.height/size.width, 0);
Replace the 0 with a 1 to enable the hit tests to function.
Another issue I noticed was that your mouse values are relative to the screen and not the canvas. As the canvas is on a scrolling page it may not be taking up the full screen at all times.
I have this problem that is driving me nuts!
So, when I draw a boxshape body with an angle different to zero on SpriteBatch(and even on Box2DDebugRenderer happens the same), the body looks pixelated in my computer's screen. This problem persists even when I run the application in my phone. I've been searching (A LOT) about this, and I have not found anything to solve this. Most people that had similar problems (not with an angle) found solutions by changing the .setFilter to LINEAR, but that did not do anything for me.
I tried to put an image of the problem here, but apparently I need 10 points :(
So here is a link with the image :)
http://postimg.org/image/xgeqttpvd/
I would really appreciate if you know the solution for this!!!!!!!!!
You are seeing aliasing from the edges of the rectangle of your sprite. You have two options. The first is to turn on antialiasing, which you can do like this in the desktop launcher and in the android launcher (not in the core project):
AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();
config.numSamples = 4; //or 2 or 8 or 16
initialize(new MyGdxGame(), config);
or on Desktop:
LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
config.numSamples = 4; //or 2 or 8 or 16
new LwjglApplication(new MyGdxGame(), config);
However, this will not perform very well on a phone if your game has very many sprites at all. A better way to do it is make a sprite that has a transparent border built in. Something like this (screenshot from Gimp to show transparency:
Then if you use LINEAR filtering, it will clean up the edges, because the visible edges are internal to the sprite, and not aligned with the actual polygon. Note that you will have to adjust your sprite to be slightly larger than your box2d body so it visually matches the body.
I have an application for kind of like a homemade microsoft paint made completely in AS3, I am not that advanced in actionscript, but I will ask you my question and thank you in advance!
So I have buttons, each button is a drawing tool, and I want the icon for the drawing tool(button) to be something different than when it is up, down, roll, hit. A compleletley different image to appear ontop of the current button so the user knows what tool is in use while they are using it..
What would be the easiest way to do this with AS3, the timeline and use of movie clips?
Thanks!!
You want to define your button as an instance of SimpleButton, then set the images directly. Kind of like this:
var clearBtn:SimpleButton = new SimpleButton();
clearBtn.upState = mc2;
clearBtn.overState = mc2a;
clearBtn.downState = clearBtn.upState;
clearBtn.hitTestState = clearBtn.upState;
Which I took from a similar question / answer posed on the adobe forums.
If you have these buttons as MovieClips - just change their type to Button in the library. Each button has four keyframes 1- default state, 2 rollover, 3 hit and 4 hit area.
That's the easiest solution without coding.
I've been playing around with HTML5 and canvas and sprites and I've managed to get myself a bit stumped. I was wonderring if there was anyone out there with just a bit more experience than me who could help me 'tune' this (and also make it work).
I've got all the code up on GitHub https://github.com/AlexChesser/jsSprite and have put a live demo up over here http://chesser.ca/jsSprite
What you can see from Test 01 and 02 is that I'm able to send the Minotaur directly to the on-page canvas, I'm able to animate the Minotaur on the canvas... but when I try to create the Minotaur and add it to another canvas - I'm getting a blank screen.
(attempting to implement https://github.com/AlexChesser/jsSprite/blob/master/03-animated_minotaur_on_canvas.php)
I know it must be something small and sill that I'm doing wrong here, but I've been staring at it for hours and I can't track down the problem.
I thought I'd try posting up here to see if there's anyone who can see it 'in one go' AND to maybe let me know if there's anything I can do better.
If you're interested in getting a little further under the hood on this stuff, the lion's share of the code for this is coming from a Blog post http://www.johnegraham2.com/web-technology/html-5-canvas-tag-sprite-animation-demo/
Anyways, maybe it's one of those things that "comes to you" once you've walked away from the problem for a little bit. Fingers crossed I can either figure it out or someone out ther ecan give me that little push in the right direction.
Thanks!
:)
I just stepped through your code.
MainContext.drawImage(m.canvas, 0, 0, m.width, m.height);
is occuring before drawFrame gets called because the image isn't ready yet.
So the mainContext.drawImage is drawing a canvas that has nothing painted on it yet.
Then the Sprite's canvas is loaded and ready to go, but its too late!
For confirmation, you can call MainContext.drawImage(m.canvas, 0, 0, m.width, m.height); in the browser console and you will see the minotaur appear.
As Simon Sarris said, you are drawing the canvas too soon. What you'll need to do is either loop until the sprite is ready, or add a callback to your sprite that is called after it draws.
You already have a function attached to the image's onload event, you should be okay to do something similar for the whole sprite.
I'm looking to place an image (object) on top of the other object (default video player in Flex 4), any suggestions are most welcome. Do we've to use canvas? can I do it without using canvas? An example would be greatly appreciated, thanks.
Regards
You can have a look at this tutorial for more info:
http://www.republicofcode.com/tutorials/flash/as3displaylist/
but adding an object on top of another one , is as simple as this
addChild(child1);
addChild(child2);
basically the first object added is at the bottom of your stack. now if the object you want placed under was added after the first one. you still can do this:
addChild(child2);
addChildAt(child1, 0 );
there are, of course ,more options to manipulate the children positions but you should find what you need in the tutorial above.
Oops , sorry the word Canvas , got me confused. I thought you were trying to do this within Flex. Do you mean to say you want to do that in HTML. If you do, please retag your question, because it wouldn't really be a flash issue .
Hope it helps ;)