Printable View
What's wrong with this code? It compiles ok, but nothing shows up. "Titlebmd" is the bitmapdata from an embeded png file.
On a related note, how would I change the source bitmapdata in real time so I can sequence through a series of frames? Thanks.Code:asprite = new Sprite;
asprite.width = 512;
asprite.height = 279;
asprite.graphics.beginBitmapFill(Titlebmd); // Is this the problem?
asprite.x = 300;
asprite.y = 300;
asprite.alpha = 1;
stage.addChild(asprite);
After you begin bitmap fill you should draw some shapes like circle or rectangle.
That caught me out too when I first tried to use that function. It's the same as beginFill() - you need a shape for it to fill. Yes, you've specified a width and height but you're not drawing to the Sprite but to the Graphics object of the Sprite.
Thanks, got it working! Looks like you don't force the width and height, it gets the width/height from the drawRect command.
hmm...when I apply some rotation to the sprite, it's rotating from the top left corner of the sprite. How would I set the "handle" to the center of the sprite? Thanks for any help.Code:asprite = new Sprite;
asprite.graphics.beginBitmapFill(Titlebmd, null, false, false);
asprite.graphics.drawRect(0, 0, 512, 279);
asprite.graphics.endFill();
asprite.x = 100;
asprite.y = 100;
stage.addChild(asprite);
That's a very good question! The only thing I can think of is to perhaps use the matrix property of the transform property of the Sprite. I don't know how to use it myself but you can find some stuff about it here:
http://livedocs.adobe.com/flex/3/htm...eometry_5.html
Other than that, if you create a MovieClip in the Flash IDE, Flash allows you to set the registration(rotation) point.
Thanks, but when adding it dynamically like I'm doing there is no registration point. ugh! Searching google it seems to be a common problem. The closest I've been able to find is this, but it's still not working correctly. hmm....
Code:private function RotateAroundCenter(ob:*, angleDegrees:Number):void
{
point = new Point(ob.x + (ob.width / 2), ob.y + (ob.height / 2));
var m:Matrix=ob.transform.matrix;
m.tx -= point.x;
m.ty -= point.y;
m.rotate (angleDegrees*(Math.PI/180));
m.tx += point.x;
m.ty += point.y;
ob.transform.matrix=m;
}
Easy way to change the point of rotation of a sprite: Create an empty parent sprite and add it to the stage. Add your sprite to be rotated as a child of this parent sprite and set it's position to x = -width/2, y = -height/2. Then rotate the parent.Quote:
when I apply some rotation to the sprite, it's rotating from the top left corner of the sprite. How would I set the "handle" to the center of the sprite?
Ric - thanks, that sounds easy enough in prinicipal, but if you have time a code example would be greatly appreciated for this noob. ;)
No problem - something like this:
This should rotate the child sprite about it's centre by 45 degrees. Obviously you'd need to draw something onto the child sprite to be able to see it - this example just uses blank sprites. Hope that helps. :)Code:var parent:Sprite = new Sprite();
stage.addChild(parent);
var child:Sprite = new Sprite();
parent.addChild(child);
child.x = -child.width/2;
child.y = -child.y/2;
parent.rotation = 45;
p.s. if you keep progressing at this rate you will need to change your user name in a couple of days time!
Holy crap Ric...that is sweet and works like a charm! Plus, I can manipulate the scaleX,scaleY properties of the parent which affects the child as well. And the whole time staying center aligned. woo hoo!
This basically means 2 sprites for every game sprite so I guess the overhead of the empty parent is not too drastic? Granted, I wouldn't be using alot of these sprites in a game. Would still probably use copypixels() sprites if I need 100's of sprites zipping around. ;)
The only thing left that confuses me is how I might go about handling strip based animation with these sprites? With the copypixels() bitmap sprites it's a breeze, but I don't see copypixels() supported in sprite.graphics(). So how would I go about changing the bitmapdata of sprite on the fly for animation?
Would I need to beginbitmapfill from a bitmapdata source everytime I change a frame animation?
Thanks.
I think the overhead of the parent sprite would be negligable as there is no extra rendering involved.
I'm afraid I don't know the best way to animate using the bitmapdata method you're using - it's not something I've done much.
If you don't mind my saying, having read a few of your previous posts, you do seem to be intent on quite an unconventional path, for a beginner at least. I'm not saying that your route is not without merit, and it may well work out faster using this bitmapping technique, but I do get the impression you have jumped right in at the deep end. You might want to consider for your next project going down a more 'conventional' route (I'll explain what I mean by that in a minute). You may lose a little bit of speed at runtime, but I think you would pick up some of the basics of Flash programming which you may have skipped right over, and I think you would find the whole workflow easier to manage.
So what do I mean by conventional? Well fist off, I would get hold of Flash CS3 or CS4 (I think the demo has quite a decent trial period). All of your media can then be stored in the integrated library and referenced by your code (for which I would still use Flash Develop). Then things like setting the rotation point for a sprite, and creating frame based animations for your sprites (which, strictly speaking you would then call 'movieclips' not sprites because they have more than one frame) can be done easily in the Flash editor without code.
You will find this way of developing games a lot more visual - very handy when it comes to creating game elements, gui's, menu screens etc. where you can simply drag and drop the elements you want onto a series of movieclips and use your code to instansiate the clips when needed. Using the Flash editor doesn't mean you have to create all of your assets in Flash (although you can) - you can still import external assets, but it does allow you to organise, arrange and manipulate these assets very easily.
I think most people find this way of developing games produces results which run fast enough. You can see some of the games I've written using this method if you like here. If you desperately need more going on and faster speeds, then I wonder if Flash is the right platform in the first place .... it was never designed to be a serious gaming platform after all, but it's fine for simple stuff!
If you do have a go with the Flash editor, let me know and I'll send you a .fla of Pong so you can see how I organise and structure a basic game.
Cheers.
Hi Ric, very good points all around, thanks. What I'm doing is looking for a way to jump on the flash bandwagon the quickest way possible that makes sense to me. And that would be a programming style where you have layers, create the game screen from scratch each frame using blit commands. The blit commands I'm used to also allow rotation, scaling, blend mode, etc, etc.
BTW: Your games look lovely. Really smooth animation, great graphics. The 3d stuff was really slick. ;) I appreciate you taking the time to reply. ;)
CopyPixels() - Allows a fast method to put alot of generic sprites on the screen. I would probably use this for a tile map background as well. Since there is no realtime rotation, scaling, fx possible, this all has to be pre-rendered in the tile/sprite image strip.
Sprites() - This allows me to create game sprites with real time scaling, rotation, blend modes and so much more. Based on my research you really can't get away with using a bunch of these. I would probably use these for my UI, title screens, etc, and in game when only a few sprites are needed or if I need easy access to make the main players rotate, scale, etc.
Basic ScreenFades() - I add a rect Shape() to the stage at last position with the full width/height of the stage so it covers everything. I make the color black, and then I manipulate the Visible,Alpha properties when I want to fade in/out.
Collision Checking - Basic rect and circle collision via code. Simple and easy to do.
The above basic tools is almost a direct 100% relation to the tools I've been using for years to create games in VB6, Blitzmax. I've never really done anything greater than simple 2d games though to be honest.
I really don't know if I'm doing things the right way or not. But in little less than week, I have a basic AS3 framework that I can use to code just about any simple 2d game. Asteroids, tetris, pacman, mario, etc. Right now I'm just setting the framerate to 31 and while the framerate is a little slugish, it's more than acceptable for smallish Flash games in my opinion. I'll probably add some kind of time based movement code in the future.
Quick little demo here: Nothing amazing by any means. :)
http://gameagoo.com/flash/
Right now I'm just using FlashDevelop and the Flex SDK. At first I was using CS4 but I was overwhelmed by the robust ide, tools, etc. I needed to dumb down a bit and get something more along the lines I was used to, just a generic editor and a compiler. :) lol..
Anyway, Im going to stick with these tools for my first couple of small games then when I'm a little more AS3 experienced I'll probably purchase CS4 and learn more about the displaylist, etc. I've never coded in Flash until a week ago, I wished I would have jumped in years ago. Oh well.. :yikes:
That demo is fantastic! There is a lot to be said for using a technique you are used to and comfortable with, and you do seem to have the main bases covered. I look forward to seeing what else you come up with! :)
Thanks Ric for the nice comment. I have a long way to go, but at least I have something I can play with now. Seriously...thanks to this forum. Wow...what a bunch of nice tech heads around here! :) :) :)
Hey as3newb, Squize is right, I did create a series of tutorials where I start from scratch and create most of an Asteroids engine with just blitting, math look-up tables, pixel perfect collision detection, and a particle farm. I don't recommend that as the approach to every or even most games, it was simply a public experiment that turned out pretty well. I actually think someone on here stated that it was not possible or was not a good use of blitting for an Asteroids game, so I decided to test it out my own way.
I probably won't create too many complicated games in this manner, but it is possible. It helps to know the techniques that can be used to optimize the rendering of a SWF platform game (not platform as in Mario), but sometimes it ads some extra headaches that need to dealt with (translating the upper left-hand corner of a blitted object to the center point, etc.
Some games need it, but many do not.
AS3 sprites are pretty powerful, and given your development system of choice - Flex (nice choice by the way), I think you can utilized blitting where needed and also use a Bitmap object inside of your Sprites to gain the advantage that sprites offer - as you stated, scale, rotation, and even mouse events, etc. You can simply change the BitmapData reference that is applied to the Bitmap object attached to your sprites to simulate animation if needed.
Hi 8bitJeff, yah I'm an old school blit coder at heart. :) Hey...you have my attention on this line "You can simply change the BitmapData reference that is applied to the Bitmap object attached to your sprites to simulate animation if needed."
The only way I know to get bitmapdata into the sprite was by doing a bitmapfill, how would I change the reference to the bitmapdata? Any code examples? (please?!?) :) lol.. Thanks for the comments.
I thought the 7800 asteroids example was brill by the way. ;)
The concept is pretty simple, but I am not sure I have a ready made tutorial on it anywhere (I have do it as part of a larger system I am currently working on).
Basically you have:
1. A Sprite instance on the screen
2. A Bitmap instance attached to the displayList of the Sprite Instance
3. When you instantiate the Bitmap instance you pass it a empty new BitmapData instance the size of your desired character or object (let's say 32x32 with transparency set to true.
4. To apply a look to the Bitmap instance, you can either do one of two things:
A)copy a 32x32 sized piece of a tilesheet (a BitmapData instance that holds a PNG) to the BitmapData instance inside the Bitmap - you do this with a copyPixels operation. It can be done each frame tick to simulate animation.
B) Create an array of 32x32 BitmapData objects and simply set the Sprite's Bitmap BitmapData object to reference the one you want to apply each frame tick.
example:
bitmapinstance.bitmapData=aCharacterCells[2] to apply the 3rd BitmapData instance in your array to the bitmapinstance inside the sprite instance.
I'll see if I have a decent simple version that i can post this weekend.
-Jeff
Hi 8bitjeff, thanks for the reply. However, while I understand the basic idea I don't see the properties in the sprite to do what I think you're saying.
For instance, we can't do: "sprite.bitmapdata = newbitmapdata;" I guess that would be too easy. :) The only way I'm able to get bitmapdata into a sprite is by doing:
bitmapinstance.bitmapData=aCharacterCells[2]Code:sp.graphics.beginBitmapFill(mybitmapdata, null, false, true);
sp.graphics.drawRect(0, 0, width,height);
sp.graphics.endFill();
That looks like a winner there, but I'm not following how the bitmapdata ends up inside the sprite. Are you by any chance implying that the bitmapinstance for mybitmapdata could be changed on the fly by moving over new bitmapdata to it and it would be reflected inside the sprite without the need for a new beginbitmapfill? (phew...what a mouthfull..) :confused:
I guess I could do a beginbitmapfill as needed to update the data, I'm guessing under the hood that's probably the same thing as doing a copypixel or array move. :confused: Yah...a quick code snippet when you have a chance would be most grateful. ;)
It's late and this is off the top of my head, but here goes:
There are no BitmapData properties in a Sprite, but there are in a Bitmap object. Here is a little example:
let's pretend that you have embedded as PNG in your Flex app and given it a class name of PNGSPRITESHEET. It contains rows and columns of 32x32 sprite cells. Bitmaps embedded through Flex at design-time are given a base class of BitmapAsset, a child of the Bitmap Class. The BitmapAsset has an attribute of bitmapData that gives access to the pixels in the sprite sheet.
var spritesheet:BitmapAsset = new PNGSPRITESHEET();
var spriteinstance:Sprite=new Sprite();
var bitmapinstance:Bitmap = new Bitmap(new BitmapData(32,32,true,0xffffffff));
var rect=new Rectangle(0,0,32,32); // used to pick a region in the sprite sheet to copy FROM
var point=new point(0,0); // point in the OUTPUT bitmapData to copy the rect TO.
addChild(spriteinstance);
spriteinstance.addChild(Bitmap);
//copy a 32x32 chunk of the spritesheet to the bitmapinstance now inside the sprite:
To copy the first cell (top left corner of our sprite sheet to the BitmapData inside our bitmapinstace, which in turn is inside our spriteinstance, we leave the rect properties as is (0,0,32,32).
bitmapinstance.bitmapData.copyPixels(spritesheet.b itmapData, rect,point)
You modify the x and y properties of the rect to change what sprite (32x32 region) you copy from the sprite sheet.
You modify the x and y coords on the spriteinstance to move the whole shebang across the screen (or rotate, scale, etc) and you have a little blitting engine based inside a single sprite instead of a full screen blit.
Is that more confusing than when we started?
If so, I'll have a tutorial prepared over the weekend and up on my site to explain it because it sounds like a useful subject.
-Jeff
Pretty much that's how it works because everything in the AS3 swf platform is passed by reference (many not primitives though). If a BitmapData object is a property of a Bitmap object that is inside a sprite (on its display list), by simply changing the reference of the bitmapData inside the Bitmap will change the look of the bitmap ans thus the sprite.Quote:
Originally Posted by as3newb
I have to work up some examples of both of these (the above also) that are real world and working, but this is how I have been doing it for years.
Awesome Jeff, I got it all working! Thanks so much! Now I can animate my Sprite() objects. woo hoo! It's a fairly difficult concept to grasp because in order to get auto centered scaling and rotation, I have to first set up an empty parent, then attach a child which attaches the bitmap. :yikes:
Now it's time to code some high level wrapper routines to all this stuff so it's much nicer to play with. :)
Yes, the Bitmap inside the Sprite must be placed at 1/2 width, 1/2 height for x and y respectively. That is the only way to rotate the Sprite and have it be radial motion around the center point rather than radial around the top left corner. It bugs me too.
-Jeff
whoah....come to think of it, I don't need that initial empty sprite anymore since the bmp is a child of the sprite. Excellent. :)
instead of drawRect to draw your square or rectangle use the moveTo and lineTo property, doing this adds the registration(roation point) to the center so no parent will be needed. heres some sample code:
Note: this makes a standard 5 by 5 square and when you go to addChild(moon); also add the X and Y you want it t be located at.Quote:
var moon:Shape = new Shape();
moon.graphics.lineStyle(0,0xFFFFCC);
moon.graphics.beginFill(0xFFFF00);
moon.graphics.moveTo(-5,-5);
moon.graphics.lineTo(5,-5);
moon.graphics.lineTo(5,5);
moon.graphics.lineTo(-5,5);
moon.graphics.lineTo(-5,-5);
moon.graphics.endFill();
I know this isn't a sprite, but it gets the job doneQuote:
addChild(moon); // adding moon to stage
moon.x = 200; //X coordinate
moon.y = 200; //Y coordinate