00:00
00:00
Gimmick
Thanks for dropping by!
NOTE: My outbox is full, so I may not be able to reply to PMs directly - might PM a reply via my alt or through comments.

Student

Somewhere

Joined on 8/20/08

Level:
28
Exp Points:
8,430 / 8,700
Exp Rank:
4,407
Vote Power:
6.96 votes
Rank:
General
Global Rank:
388
Blams:
1,969
Saves:
23,283
B/P Bonus:
48%
Whistle:
Silver
Medals:
2,487

ASBoxer, a hitboxing tool (Update again!)

Posted by Gimmick - October 28th, 2014


Update as of 5:56 AM, 11/21/2014: I've not forgotten this project! A lot of progress has occurred in this so far, although that could be due to feature creep, since this project is technically 'finished' :v


So for a few days I've been working on a little hitboxing tool after I saw a post in the flash forum by @PsychoZombii requesting any hitboxing tools. There weren't many apart from Hitboxer, and I saw it as a challenge.

What is a "hitboxing tool"? 

A hitboxing tool is basically an application that allows you to draw hitboxes on any spritesheets that you import, and exports the resulting hitboxes in some file. The one I'm working on has the option of exporting it to XML.

That's really basically it. Sounds simple and yes it is. (Edit: ...although feature creep is slowly, um, creeping in...)


Features so far:

  1. Import spritesheets and split them up into rectangles (frames)
  2. Add/remove hitboxes
  3. Export to XML
  4. Preview animation and step through frames
  5. S̶o̶m̶e̶ ̶s̶o̶r̶t̶ ̶o̶f̶ ̶a̶ ̶u̶s̶e̶r̶ ̶i̶n̶t̶e̶r̶f̶a̶c̶e̶  Well it's become better now; I've skinned the buttons to be flat instead of the default beveled style because it's simple and I'm no artist. I may make skins available for that sort of thing if users prefer it in the future, though.
  6. Scroll wheel zoom
  7. Better XML support -- mostly backend stuff that will make it easier in the long run.
  8. Box tags and names. Tags are added as children of the <box> tag, rather than properties of the <box> tag so as to reduce clutter. Names are properties of the <box> tag itself, like so: <box name='foobar'>
  9. Namespaces in the output XML -- if the box tag has children, the property 'xsi:nil' is 'false'. If not, the tag ends with '/>' and has 'xsi:nil' set to 'true'.
  10. Timeline support -- I now have a layer system similar to Flash's layering system, with frames and all. I plan to include multiple layer support as part of the timeline and different nodes for different layers; this could be useful for creating multiple hitboxes for a character, say, for different levels or different 'upgrades' and so on -- use your imagination :p
  11. Ability to dock and undock windows on user input -- much like Flash's and general Adobe's stuff, integrating into the main window or docking into separate windows. Uses a Panel class and a custom NativeWindow class for that. Currently uses a boatload of event listeners, though; will possibly work on reducing that in the future.
  12. Negative framerates and backwards playback.
  13. Import GIF files instead of a spritesheet; uses the as3gif library by Thibault Imbert -- Note: this imports a gif file and then creates another bitmapdata and copies the frames to it, so it will use around 2x the memory it actually requires. Thus, don't import medium to large GIF files (dimensions, that is -- a 100KB gif file is fine if it's less than 200 px * 200 px and / or has less than 30 frames) just yet.
  14. Timeline layering support -- I guess I'd finished this a while ago, just forgot to update. Now for a particular spritesheet, you can have multiple hitboxes (say, for example, powerups -- the hitboxes may change in size, and the different layers can hold differently-sized hitboxes for that purpose. It's a <layer> tag that contains the <frames>. I suppose I could just convert them to an attribute for compact sizing, but idk)
  15. Clipboard support -- now you can copy boxes and paste them.
  16. Pie menu support -- now there's a main context menu that looks kinda like the context menu in Maya and other programs.
  17. Export GIF from spritesheet and export spritesheet from GIF -- This is more like a secondary utility as it does not have anything to do with ASBoxer as such, but is a nifty utility to have. Who knows when it might come in handy? You can export a GIF from a spritesheet only (because what is the point in importing a gif and re-exporting it? If it's corrupted, you can instead export as a spritesheet and then re-import it and re-export it as a GIF, if you want; that'll fix it, most likely) and export a spritesheet from a GIF only (again, because what is the point in importing an image and re-exporting with the same settings, or worse?) The formats exportable from GIF to spritesheet are JPG, JXR and PNG.
  18. Support for JSON exporting -- you can now export to JSON (it's a good thing flash had native JSON support.) The layers have name properties inside them, and to access a layer, or a frame, or a box, you just go by its index; if there are 5 layers, they can be accessed from 1...5; if there are 200 frames, they can be accessed from 1...200. If there are 2 tags in a box, it can be accessed by 1 and 2 respectively. After that, just use .name to get their names.
  19. New! A splash screen akin to Visual Studio 2010's and similar programs.
  20. And some other trivial stuff I don't remember.

Features planned:

  1. Refactoring (really really crappy and tightly coupled code right now)
  2. Resize the boxes after drawing them (seems strange to be able to add and remove them but not resize them)
  3. Upload many images instead of a large spritesheet
  4. Native menus rather than a custom UI
  5. New! Autoboxing: Where you select a spritesheet and it automatically creates boxes based on the shape of the character
  6. New! Select individual rectangles instead of many rectangles of the same size (frame rects)
  7. New! Extensions (using a custom API or some other way, sounds exciting!)
  8. New! Custom skin support for user interface
  9. New! Chroma-keying / background support for non-transparent images (like JPEG and JPG files, and 24 bit PNGs without transparency)
  10. New! Plugin chains like Vegas Pro / Sound Forge / etc.

And after I've completed most features I guess I might put up the project on Github if I feel like it. Suggest any other features you'd like to see!


Screenshots:

Main screen on 10/26/2014:first prototype
(image squashed to show lack of fluid layout in the application)

Main screen on 10/27/2014:second prototype
(image squashed again, but this time there's a fluid layout -- the sidebar doesn't shrink)

Editing screenshot as of 10/29/2014: (I didn't show the main screen since the panel on the right was removed; it was supposed to appear only while editing, so this is more of the actual application. Lookin' good if I may say so myself)third prototype
(fluid layout and checker backgrounds -- the trollface image was the quickest transparent image I could load, hah. The button marked "label" was supposed to be the button marked "apply changes", but I'll change that later.)


My exams are now over! Now for the next set of exams in April :>

In the meantime, I'm working on:

  • #2, Resizing the boxes after drawing them.
  • #4, Native menus rather than a custom UI. (Although I may offer an option of both if people want that) (Special note: This is a rather daunting task because there's so many options to be included. It's made really easy due to Adobe AIR, but there's still a bit left, say anywhere from 35% to 50% remaining)
  • #9, Chroma-keying.

Features Finished

  1. 10/26/2014 and prior -- Most of the basic stuff (features #1 to #5)
  2. 10/28/2014 -- Better XML support
  3. 11/03/2014 -- Box tags and names (updated on 11/05/2014)
  4. 11/20/2014 -- Ability to dock and undock windows
  5. 11/21/2014 -- Timeline support
  6. 11/26/2014 -- Negative framerates and backwards playback
  7. 12/01/2014 -- GIF Support added! Now you can import GIF files and it'll convert them into frames. Thanks to the as3gif library by Thibault Imbert.
  8. 12/02/2014 -- Timeline layering support
  9. 12/04/2014 -- Clipboard
  10. 12/05/2014 -- Pie Menu support
  11. 12/07/2014 -- Export GIF and/or Spritesheet
  12. 12/10/2014 -- Splash Screen
  13. 12/13/2014 -- JSON Support

Features partially / mostly completed

  1. #2, Resizing boxes after drawing them
  2. #4, Native menus rather than a custom UI (well, both right now coexist and I'm not planning to remove that)

Comments

That's awesome!
Good luck Gimmick!

Thanks! Long time no see dude, what's up!?

Drawing. Studying Java.
Trying to spend my free time without wasting it.
Same ol same ol. :3

That's great! I guess part of the reason why I'm not wasting any of my free time is because TF2 needs a huge update and I can't download it right now lmao. Good on you for having self discipline! .-.

BTW did I say your art's really nice? Your art's really nice!

Holy crap! Dude you're only 16 and your knowledge is so advanced! I've only started teaching myself to program since the start of the year (AS3) and I'm 28! I'm so envious of your level of skill that you've attained while so young -_-' I feel so old and behind the times..... Alas, programming is my newfound passion and I don't ever plan to give it up. Since the start of the year I have pretty much spent all my free time (which isn't much these days due to school) plugging away at learning how to code. I love it and can only hope to reach your level some day ^_^ I haven't seen you on the forums until recently but I'm glad you are back and looking forward to interacting with you in the future :)

Aww, thanks :3
I'm not really sure of my level though, I just learn bits and pieces of things here and there.

: I'm glad you are back and looking forward to interacting with you in the future
Yeah! I'm a bit sad I didn't use the forums earlier, they're quite useful, and I look forward to interacting with you too in the future :)

really cool features so far, dude! waaay more that i could've thought of.
i cant wait to see the final product!

you should add gif support btw :>

Thanks! I guess it's technically 'final' since users can do like 99% of the stuff they need to use; the remaining stuff is mostly new (unnecessary? :> ) features and maintenance.

Yeah I'll look into it, in the meanwhile you can use IrfanView or something to convert a gif into its frames or something.

Edit: It's done! You can now import gif files. Don't import large ones, though.

nice! you work fast lol.

I'll have to donate when you release this :>

Thanks! Although the as3gif library had already done most of the work, so I just needed to implement it.

That's up to you, you don't really have to :>

oh wow, that lib is really cool! i had no idea flash had so much control over gif files :O
an i totally will, you deserve it!

Yeah ikr, it's really amazing, bytearray can be used to do pretty much anything i guess :O Although some gif files don't really display so well -- I tried 3 gif files and out of the 3, 1 was sorta corrupted (frames blank or partially missing) so it could definitely use some tweaking in the near future.

Thanks, I appreciate it a lot! :>

ayyy, you got the clipboard and pie menu added! nice!
not trying to give you more work or anything but how long do you think it'd take to implement an "export to JSON" capability? JSON is pretty much treated like an AS3 object in flash, so i reckon it wouldn't take too long, but if it turns out to be more complicated, i could help implement it, if you want.

I haven't really heard of JSON prior to this (well I kinda had but ignored it before...) I'll see what I can do! What other formats do I need to hear of? (2 formats only sounds kinda limiting...)

Edit: Done! Took a somewhat short time because flash had native JSON support, took a bit longer than expected due to rookie mistakes xD

i was going to tell you how easy it was but then i saw your edit lol. i didnt know it had native JSON support until some months ago actually haha

i cant think of any other formats that people use...json and XML are the most popular, so those are the only two i know about and use, heheh

Yeah, good to know that it had JSON support, writing a custom class would've taken way more time than expected haha

I've heard of YAML, XML, JSON and Starling/ATF. Not sure how applicable YAML and ATF would be though, since the first has few libraries for flash and ATF is primarily for images.

starling, of course! i knew i was forgetting one. just looked up YAML though, seems interesting! never heard about it until now. not my cup of tea though lol.

also, for the resizing of boxes feature, there's a REALLY good transform tool made by senocular.
demo: http://www.senocular.com/demo/TransformToolAS3/TransformTool.html

src: http://www.senocular.com/flash/actionscript/?file=ActionScript_3.0/com/senocular/display/TransformTool.as

what do you have to complete in regards to the native menu?

IDK if I can do starling, though. It seems mainly suited for images and the like. YAML is more human readable, but takes longer to process by computers. It's more of a mix between XML and JSON.

Wow that looks great! Thanks!

Well I mostly have to complete buttons and windows and such. It's easy to do but it's sooo boring :<

well, even starling users use json and xml. at least, i know mintpaw used to before he switched to haxe, and he was like the main starling guy of NG lol

no problem! also, btw i have a few functions on my github that'll batch build a native menu + items from an array. i made it because i got really annoyed making native menus all the time lol. https://github.com/SnaiLegacy/utils/blob/master/src/NativeMenuBatchExample.as

it saves time and keeps code organized! for me anyway

as for the window stuff i could help if you want :> i know how annoying coding minor things like that can be sometimes lol

Thanks! That'll surely help :D Right now I'm working on general stuff like a splash screen and so on (like Visual Studio's) and I'll try this out when I come back to native menus. Gotta update that post soon :p

By the way, I noticed you were using getQualifiedClassName for each item in the array and casting i to a uint before accessing (since i is already a uint, it's a bit redundant imo) . I'd imagine that'd be a bit slow, you could just replace it with (commandArray[i] as String) or (commandArray[i] as NativeMenuItem) which either returns null or some result. If it's some result (any result) then casting to Boolean will return true. Since NativeMenuItem is not extending String, it will either return null or some result (however, casting something to Sprite and casting something to DisplayObject will be the same since Sprite extends DisplayObject.)

I may take you up on that offer when I require it, thanks :3
I'm intending to release it by Christmas, but I guess that there's a bit too many bugs and unfinished stuff for that to happen. Maybe by New Year's Eve or New Year?

oh wow, good catch! i made that code a while ago (like last year i think) and i never bothered to actually look it over again. you're totally right about both the getQualifiedClassName and uint being redundant (i have NO earthly idea why i did that tbh). i'll fix that asap since i'm actually using it for one of my projects right now.

and yeah, just msg me whenever. i have my last final today and so i'm pretty much on vacation.
a new years release sounds good too. although i cant do any real fighting game debugging without hitboxes haha. i'm still convinced that this is better than me doing it manually though. cant wait to see it in action man :>

side note: i just made my own printf for AS3 (you know, based on the C/C++ printf). it works well, but it's twice the speed of trace from what i can see. not that good at memory management, but i'm looking for things i can change...maybe i need someone else's view on it? can you give it a quick scan? https://github.com/SnaiLegacy/utils/blob/master/printf/printf.as

You're welcome! :D

Ok, cool! How'd finals go? I can give you the current version of ASBoxer if you'd like, currently there's more than enough in there and looks pretty finished, and since next updates are gonna be sorta more cosmetic anyways (with a little more of functional code, but later) you can do it now and export it. I guess I could implement a custom extension, like an FLA or some similar thing that reads the image and the associated XML so that you can continue working on it (aka saving the boxes rather than import/exporting them)

Okay, I'll have a look at it later and update. Gotta get some sleep now -_-

finals were okay, i think i did a decent job. i was really tired afterward and went to sleep at 8PM (and woke up at 5AM :O)
i'd be happy if you could give me the current version-- i've been dying to test out my collision system with it :> also about the thing that reads the image and associated xml, you mean like an ASBoxer project file right? it's pretty much a feature of AIR. you could just make a custom filetype (i.e. projectname.asb or something) by making your own file algorithm. i've done it a few times before using bytearrays. it's pretty easy, so you should have no problem :>

and thanks, i'll be waiting for any input on printf. by the way, you wouldn't know any good ways to get the memory address of a variable in AS3? i have a way, but it requires you to make (and catch) an error using that variable, which is bad :<

Now for the results :>

Okay, I'll upload the most recent version soon. Yeah that is what I was talking about, register one in AIR settings and then use FZip or something to create a compressed file (image+xml/json) and save it as something.asb. I'm currently divided on the format name: It's either "asb", "asf", "bpf" or something like that. Hopefully something unique and still relevant :p

Umm, for that I guess something more low level would be appropriate. I think Alchemy / flash opcodes can be used, but I'm not sure. In AS3 there's no direct method for pointers and so on. It's one of the reasons I'm considering C# and other stuff (also speed). Speaking of which, I really gotta start learning C++, still haven't gotten round to it....maybe when I finish this project :\

Edit: I looked at printf, and there's a lot of duplicate code -- most of the checking is just if it's uppercase or lowercase. Instead of comparing all possibilities, check if the string currentSpecifier is the same as currentSpecifier.toLocaleLowerCase() and if it's not, then it's uppercase. Also, there's a lot of use of indexOf, I don't know how fast that is and maybe it could be sped up using the "fromIndex" value because it's essentially searching the string again and again instead of from the last specified index (didn't get much of a speedup though). Function lookups, while they're convenient and neat, are slow, sadly -- the fnumber class is kinda useless since they can all be inlined (well, except for toHex()) and it speeds up a lot. The same functions can be returned just by using the inbuilt toPrecision(3) for Number (3 dp), toString(8) + a trailing "0" and toString(16). No idea about the 0s before, though.

I've made some modifications, and it's gone from 14 ms to 5 ms per printf call. However, I do have to fix it since I've 'broken' something on my copy -- it goes into an infinite loop. I'll pm you when I finish working on it.

Although it isn't that big a slowdown, because you're using trace as well - just try calling trace() a hundred thousand times! The flash player will crash in debug mode, because it is slow as hell. If you return a string, it's not _strictly_ printf, but the user will have the choice whether to store it or to trace it, and it'll be miles faster and stabler. Oh, and there isn't much of a noticeable slowdown unless you're calling it a hundred-thousand times each second!

Oh and by the way I've sent you a PM of the source! You can't resize boxes yet -- the TransformTool class? Yeah I tried implementing that, but apparently there's no ControlSetStandard class in the source, strange. Missing files - missing code!