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.
Related
This question may get downvoted or go unanswered because it's not the greatest and incredible silly but anyway,
I'm taking an intro level Webanimation course this semester at UNI and had I know what their expectations are for our hand-in projects i would have never taken it up.
Basically the teacher taught us stuff to the extent of masking/tweening and very few mouse-event and basic function codes.
Now she is expecting us to make a god damn ENTIRE PIPE GAME. The one where there are a bunch of rotating pipes and you gotta rotate them in place before a timer runs out and then the water flows through them.
For this project I have to somehow figure out the following (even though she didn't teach any of this):
-creature a grid of rotate-able pipes (one mouse click I assume would do a 90 degree classic tween rotation of the object)
-creature some sort of logic hit-box value chain to make pipes decide when to fill with water (they fill with water (a.k.a turn blue inside as an animation) once they are connected to another water filled pipe, for example)
-creature multiple levels and a menu screen
-add a music track.
Now i know this site is for specific help only and you basically can't ask for help on an entire project, so for now if somebody could just help me out with the following:
How do I create a rotating pipe on mouseclick?
So I have my pipe movieclip created and I have my Mouse Event code ready but I don't have the faintest on how to make a tween within the pipe and connect it to the code so that it rotates on mouseclick.
So this far, let's say for one of the pipes, instance pipe_1, I want to do this:
pipe_1.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
trace("Mouse clicked");
}
I also have the simple tween of rotation already created within the instance of the pipe, but dunno how to connect it to code.
I'm supposed to figure out what to put inside the function but I honestly have no clue. Hours of googling have come up with nothing either except a 12 dollar purchasable source code for an even more complicated pipe game.
I hope somebody can at least help a bit, and thanks.
The way to rotate a clip is via it's rotation property. It defaults to 0.
If you were set the rotation property of your tile to 90, you'd rotate your pipe tile 90 degrees.
for example :
pipe_1.rotation += 90;
A tween is a means of changing a property of a given DisplayObject over time. So what you want to do is tween your rotation property 90 degrees over time.
Here is a tutorial on Tweening - http://www.republicofcode.com/tutorials/flash/as3tweenclass/
I think it'd be more beneficial for you to take the time to learn about it, than to have me just write a few lines of code to solve your problem.
StackOverflow is a place where you can ask a question, AFTER you have tried something and have hit an issue.
I have provided you with the basic concept of what you need to do, and if you take the time to learn about tweening, you'll be able to achieve your goal rather simply.
There are also tweening libraries such as TweenLite and TweenMax that simplify tweening. Not sure if your class will allow you to use them, but worthwhile to check out for your own benefit.
You can find TweenLite here :
http://www.greensock.com/tweenlite/
Are you talking about a frame by frame tween? or tweening with code?
for frame by frame tweening, you can try to do this:
pipe_1.addEventListener(MouseEvent.CLICK, f1_MouseClickHandler);
function f1_MouseClickHandler(e:MouseEvent) {
pipe_1.gotoAndPlay(2); //if the tween starts at frame 2
}
For code tweening, just call the tween function inside that handler function
I simply added a sprite in AS3:
Sprite myspr = new Sprite();
myspr.addChild(mybitmap);
addChild(myspr);
Then I added an event. I did hitTestPoint for checking mouse is over my sprite or not.
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseCheck);
private function mouseCheck(evt:MouseEvent):void {
var xx:int = stage.mouseX;
var yy:int = stage.mouseY;
if(myspr.hitTestPoint(xx, yy, true)) {
...
// I'm checking mouse over here.
}
evt.updateAfterEvent();
}
Problem is: hitTestPoint gives true when mouse comes to full boundary box. But it should give true only if mouse comes on transparent isometric sprite.
Is there a solution for this, thanks in advance.
this should help. You need pixel perfect detection.
Actionscript 3 pixel perfect collision. How to? (learning purposes)
http://www.freeactionscript.com/2011/08/as3-pixel-perfect-collision-detection/
http://www.anotherearlymorning.com/2009/07/pixel-perfect-collision-detection-in-actionscript-3/
http://old.troygilbert.com/2009/08/pixel-perfect-collision-detection-revisited/
There's a few ways I usually do hit testing.
1) The easiest way is to use a an already made class that you can find online. Some people much smarter than me have created complex classes that allow for much better pixel to pixel interaction. The ones listed by Paras are all good. The problem with these is, for newer users, it can be hard to understand all the code and how to implement them. Usually it is simple once you understand what is going on though. You just replace your hit test with the class file and then enter in the correct arguments.
2) Another method is to actually go into the symbol, create a new layer, and then draw a rectangle(just turn the alpha down to 0%) where you want the hit test to work. This may seem like a stupid method, after all we are just confined to a square once again. BUT, it will actually work MUCH better than you'd expect. Just draw the square maybe slightly smaller than the height and width of your character you're detecting the hit test on, and you should be good to go. Give it an instance name (the hit square that is) and then just perform the hitTest with that square instead of the actual sprite. It works wonderfully and is a very simple solution. For what you're explaining though, this sounds like it might not work. This method is more from a gamer standpoint. It looks good when attacking and getting hit by enemies, but isn't necessarily exact. Also, if you want to do this with two characters (maybe a large attack hitting an enemy) simply draw a hit box for both sprites. This is probably a little more basic than using a pre-made pixel perfect hit detection test, but it works extremely well and takes only a few minutes.
Hi Im relatively new to flash developing and i have a quick question about saving user input. I have a maze scene whereby the user navagates a character around until confronted with another object, when the character hits the object a new scene is opened promting the user to pick a solution to a problem. Once the user clicks the correct answer a box appears saying return to the maze, however when clicked and returned to the maze the character starts back in its original postion, where as I would like the scene to resume where it left off, ie the character is at the point where it collided with the object, the object has dissappeared and the character can resume on the same course.
Thanks for giving this a read I hope it makes sense and some one has a solution for me.
I did have some nice images to explain it better but apprently i need 10 reputation points to upload those.
EDIT: First Id like to say thanks for the rep points you bunch of stars and secondly I know using scenes in flash is seriously cr*p practice and outdated but its the way I learnt all those years ago and seen as Flash itself will be outdated soon Im not really looking to learn another approach using sprites or frames, I just kind of want a fix for this way if poss thank you for answering!
EDIT: Wanting the red rectangle to be removed from the scene once the black square collides with it. It also takes you to the next frame upon doing so. here is my code.
addEventListener(Event.ENTER_FRAME, fl_EnterFrameHandler);
function fl_EnterFrameHandler (event:Event):void
{
if (player.hitTestObject(Risk))
{
removeEventListener(Event.ENTER_FRAME, fl_EnterFrameHandler);
removeChild(Risk);
nextFrame();
}
}
I'd suggest you forget about Scenes! They are old, buggy, bring loads of issues with code and are generally a Bad Pratice!! So if you are just learning AS3, dont learn with Scenes!!
Use MovieClips or Sprites instead. And just add and remove them as you need!
EDIT:
To ur edit ;)
and seen as Flash itself will be outdated soon
thats just plain false and a widespread misinformation. It just has a new purpose like MultiPlattform Game Development. But thats a whole different discussion.
You could solve this by saving the x,y coordinates and then restoring them. But i promise you, you will run in to alot more problems/bugs as you go allong!
Like saved Points and Time. Will you triger the Questionscene again when u place the player on the object(last Position). Save the answers, and so on ...
Changing to DisplayObjects will save you time in the end. Just saying ;)
EDIT2:
your code in the comment should look like this:
function fl_EnterFrameHandler (event:Event):void
{
if (player.hitTestObject(Risk))
{
removeEventListener(Event.ENTER_FRAME, fl_EnterFrameHandler);//remove to prevent errors if it fires again and there is no Object to hitTest
removeChild(Risk);// do what needs to be done on this frame
nextFrame();// and then move to the next
}
}
And following correct convetions and make everybody's life easier reading this, it would look like this!
function fl_EnterFrameHandler (event:Event):void
{
if (player.hitTestObject(risk))
{
removeEventListener(Event.ENTER_FRAME, fl_EnterFrameHandler);//remove to prevent errors if it fires again and there is no Onject to hitTest
removeChild (risk);
nextFrame ();
}
}
i'm probaly confusing u now, just use the top one ;)
EDIT3:
Ok, i just had a butchers at it. It's all on a single Frame now. I would have prefered Classes but that'lljust confuse you.
To add new qestions you just have to dublicate the Question MovieClip in the Library and change texts, leave instance names the same tho, then the code will work as is!
DOWLOAD
It is certainly possible. You would store the characters attributes (e.g. current position) within a variable. Then on returning to your game you would use this variable to set the starting position of your character.
I agree that scenes are not the ideal route you should be taking. Possibly reading a good AS3 book would save you hours/days/weeks in the long run.
I searched for this a lot, but I couldn't find a solution for this 'bug' as it's called here:
http://fcontheweb.com/articles/scrollwheel/
Please, click on first flash, and use mouse wheel, then click on second flash and use mouse wheel again. Now You know perfectly what 'bug' I mean.
The thing is, I believe this bug can be solved WITHOUT externalinterface. This chat is made with AS 3:
http://www.kongregate.com/games/UnknownGuardian/game-development-room-gdr
Open 'codebox', hold ENTER to make a hundred of lines or so, and then test your mouse wheel.
It doesn't use any externalinterface technique (both obviously as it's Kongregate, and confirmed by author), just mx.component.textArea that itself implements the scrolling nicely.
I couldn't achieve that with even.preventDefault or stopPropagation. Any ideas?
E: Thank You, divillysausages! The question still isn't answered in 1% - what is textArea component's workaround?
There's two methods proposed here: http://gamedev.rasmuswriedtlarsen.com/2010/01/18/quicktip-scrolling-only-in-swf-not-on-page/, but only the first one works on Kongregate
Apparently it uses ByteArray and LocalConnection to construct an AS2 swf that stops most browsers getting the scroll event
I encountered this really weird situation, I have this bar and I addEventListener to it, so when
the bar's clicked, trace localX
private function _barClicked($e:MouseEvent):void {
trace($e.localX)
}
The weird thing is that, when clicking at the same spot, sometimes it jump to a wrong number
which I can't figure out why, I traced the width of the bar, and it's the right value, the localX is
just giving me random numbers. Has anyone ever ran into this problem? Thanks!
Hmmm, strange
I've tried a simple scenario where I have a rectangle named 'bar' and pasted your listener for the CLICK event, then tried the MOUSE_DOWN event. Both worked fine.
I didn't get random values.
My guess is your bar clip contains other objects inside and you might get values from children of bar, not bar itself. Not sure though, it's just a guess.
You could try to make sure that your values come from $e.currentTarget as $e.target might change depending on: your clip and how many children it holds, position of the click and event phase.
Try
private function _barClicked($e:MouseEvent):void {
trace($e.currentTarget.mouseX);
}
Hope it helps!
I was having the same problem, and Kevin Condon solution from the comment above helped my problem. I am just posting it here, because I almost missed it in the comment.
private function _barClicked($e:MouseEvent):void {
var coord:Point = $e.currentTarget.globalToLocal(new Point($e.stageX, $e.stageY));
trace(coord.x);
}
Thanks Kevin.
Just wanted to note a variation on this problem for those for whom the above is not working.
I was having the same issue - localX showing odd values. Mine weren't random, just far lower than what I expected. I.e., click on the far right of the sprite and get only 17.2, event though the width was reporting as 160.
What I found was that my instance was a scaled version of a symbol who's native width was much less.
Once I set it up so that the symbol and the instance had the same width, I started getting the right values.
Hope this helps someone.
If found that as long as I use the solution that Kevin Condon proposed differences in scaling between different symbols are taken into account and everything works out fine.