[AS3][pixel] GUI & Editor concept

with all the pain at the moment coding with AS3 and acutally having no propper IDE that helps with graphics sucks big time (esspecially if you are busy in that field too). So I started yesterday writing a collection of a very usefull spriteSet class, custom GUI- class that reads out a Sprite table and a sprite sheet and some cool settings class that stores all kind of mini settings by ID and can save it as a sharedObject on the local computer.

here a first demo:
http://www.renderhjs.net/bbs/flashki...TileEditor.swf
(for some odd reason my computer gets 90% CPU usuage here though there is absolutely no loop,- any ideas if this might be as3 specific as a note I used only Bitmaps as displayobjects, some Simple Button classes but those again containing only Bitmaps)
for the first skin (my design) all it needs to load (all dynamicly) is a slice table and this skin image
http://www.renderhjs.net/bbs/flashki...ui/skin_01.gif

I am very proud of the class structure so far as everything really works smooth (I never could have imagined something like this with AS1 or AS2).
My spriteSet class for example has several methods for returning slices, 1 for example the block method returns a sprite typicly from a game sprite sheet like this one (used in the demo link):
http://www.renderhjs.net/bbs/flashki...darkworld1.png

Code:

---

var sprite:SpriteSet = new SpriteSet("../srpites/zelda1.gif",continueFunction);//loads the tilemap
function continueFunction():void{//proceed once finished with loading
        var tileNr:uint = 6;
        var tile:Bitmap = new Bitmap(sprite.getBlock(tileNr,16,16,1));//get block Tile
        addChild(tile);
}

---

other functions read out id´s from a slice table (can be passed as well to the SpriteSet class) and let you slice elements by the id´s that is how I for example realized the GUI. and Once I have a bitmap object I can easily read out the width & height of that sprite and that way create relative GUI´s sizes.
These functions are essential for me as they finally enable me to skin for example my orthix project to load different models in realtime through a GUI- to much pain in the a** before.
_______________________________________________

Along the code I created this first concept of a "possible :p" tile editor
http://www.renderhjs.net/bbs/flashki..._gui/ss_01.gif
there are still some GUI elements missing but I already like it alot.

There is a high possibility that I´ll share some of the usefull classes once they have the full functionality I want. I just started but this AS3 language is truely awesome or as Squize would say "pure sex" :p


anyway since I am somewhat active on the possible tile editor I wanted to ask you guys what kind of export, import formats you´d like to have in a tile editor just post some sample lines. My idea is to create a import function that somehow automaticly recognizes the style- that way one only needed to paste his map in the input text field and let it "parse".
some samples (all: 3x3 matrix) I could imagine:

simplified text:

Code:

---

1,2,3
5,3,44
11,12,1

---

simplified array:

Code:

---

map = [[1,2,3],[5,3,44],[11,12,1]];

---

simplified xml:

Code:

---

<row>1,2,3</row>
<row>5,3,44</row>
<row>11,12,1</row>

---

simplified xml B:

Code:

---

<r v="1,2,3"/>
<r v="5,3,44"/>
<r v="11,12,1"/>

---

advanced xml (library association, allowing to use multiple sprite sets)
see my zelda engine for input or details on this:
http://board.flashkit.com/board/showthread.php?t=706063

Code:

---

<r>a-1,a-2,e-3</r>
<r>water-5,rock-3,rock-44</r>
<r>water-11,water-12,rock-1</r>

---

but let me hear your thoughts on this, as I´d like to know how you use you tile data like you have your own format, use tools such as mappy and their output format or some existing norm,...

Outstanding.....

Isn't it true that Flash 9 IDE is coming out in April? Might be time for us all to start learning AS.3 I guess. This has inspired me to start looking into it.

Anyway render, if you're looking for ideas, an isometric map editor would be just as welcome as a birds-eye one.

Good work btw.

I thought about the iso thingy,- but the problem is that there are no propper norms for it as it can vary to much. Some older iso engines used however the 16*16 sprite size such as syndicate wars, simCity2000 (snes), Shadowrun,... usually another masking bitmap (magenta color or 256 green color to indicate mask area) were used.
So if this editor "would" be useable some time it could be used for iso style games as well if they use rectangular sprites and a regular matrix order. Matrix shiftment as alot iso engines use it (shifting each row slightly) isn´t something I want to focus on with this editor as some unique tools I though of wouldn´t work well with it.

Oh and btw. I didn´t used the Flash9 IDE alpha or any other Flash IDE for it at all,- 100% coding this time. It might be a little difficult at first but as soon as you get the hang on it- it really is way more intuitive to use, handle and so much cleaner code wise.

As usual, excellent work ^^
My only suggestion would be to make the panels draggable.

of course they will be dragable,- its just that I started just yesterday, err (has not been sleeping) 2 days ago. Will add that. I need as well some input or dynamic scroll fields that can apply values (e.g zoom mode, tileWidth, tileHeight,...).

So did anyone expierenced heavy CPU usuage?

i'm using mappy for my RTS right now, and i'm using its simple Array output

map = [[1,2,3],[5,3,44],[11,12,1]];

but i need to specify other things for output like tileSize and tileset used, stuff like that which is specific for the map. So if you do add features, add the ability to output map specific data with the array.

But I'm pretty sure you've already thought of that

nice work.

@ mr_malee:
so you only use 1 sprite set?,- didn´t you ever thought of the use of various sprite sheets? Can have lots of advantages.
In your case I guess you´d needed a function that can create a new tileset out of possible several existing ones-> just exporting the ones that you used in the map? - or you´d be limited in only using 1 tileset.

as for the tileSizes you can set a general W and Height as well to the tile-sheets specific space value. But each Sheet and Level- Layer can have it´s own Width height values.
I planned some path layers as well that let you draw simple vector paths that one can use for AI movement or other thnigs. Some rectangle layer that lets you draw bounding boxes (rectangles) that could be used for example for collision detection. Of course I will try to give those some various import/ export abilities as well.

A Sprite Bank has been planned as well (tool where you can easily rip sprites from existing screenshots or mock- ups (sometimes easier design tiles that way).

But ok got you map style.. more are welcome

some nice progress :D:
http://www.renderhjs.net/bbs/flashki...TileEditor.swf

changes:
started with the code view panel wich lets you paste maps and for now parse them. Left textfield is to paste the map, right to see resuts (no tile view yet!, be patient).

supported styles:

Code:

---

1,2,3
4,5,6
7,8,9

---

Code:

---

map = [[1,2,3],[4,5,6],[7,8,9]];

---

Code:

---

<row>1,2,3</row>
<row>4,5,6</row>
<row>7,8,9</row>

---

Code:

---

<r v="1,2,3"/>
<r v="4,5,6"/>
<r v="7,8,9"/>

---

what is interesting is my attempt on detecting the files:
http://www.renderhjs.net/bbs/flashki..._detection.gif
maybe this can be rather seen as math as coding but my trick is to split rows with a queue technique that tries several split patterns from a list. The order is important its a little bit like finding at the beginning big matching chunks and if found remove matches out of the data and proceed with smaler ones till the list is done.
Once the rows have been determined its about finding the single elements. Again I think I found a cool way around this- I wrote a function that seaches for the first Number Character ("0","1","2",...) and returns it´s index position- a very same function to find the last Number character of a string, see:

Code:

---

public function firstNrAt(data:String):Number{
                        var sNr:Array = new Array ("0","1","2","3","4","5","6","7","8","9");
                        var spos:Array = new Array();
                        var found:Boolean = false;
                        var val:Number;
                        for (var i:uint = 1;i<=sNr.length;i++){
                                val = data.indexOf(String(sNr[i-1]));
                                if (val != -1){
                                        spos.push(val);
                                        found = true;
                                }
                        }
                        spos.sort(Array.NUMERIC);
                        if (found){
                                return(spos[0]);
                        }else{
                                return(-1);
                        }
                }

---

So as soon as I have the start and end position of the row values I start another function that splits that string part- currently only split(",") but other possible characters will follow if it fails with the default "," character.


and to show how fantastic :D it already works check out this crippled files,- they all are perfectly detected, if you dont believe me check it out yourself, copy them here and paste them in the flash textfield:

Code:

---

1 , 2,3
5 ,  3, 4 4

11,  12 ,1

---

note how it ignores the brake/ new lines and spaces

Code:

---

map =
 [[1,2,3],
[4,5 ,6],[7,
 8, 9] ];

---

even though the array is shifted with a return it still works

Code:

---

<r v = "1, 2 ,3" / >
<r v="4,5, 6"/><a v="7,8,"/>

---

1 return, the other node just with the >< split

Code:

---

= [
[1,2,3],[4, 5,6] ,[7,8,9]
];

---

some nasty spaces- even after the "] ,"

Code:

---

selectable textfield
1,2,3
5,3,44
some bla bla
11,12,1

end

---

the text elements are automaticly ignored, how cool is that?

next are the advanced map features such as multiple sheet assignment (note: if no such option can be found in the map file the first spread sheet will be assigned)
wich are slightly complexer but I already have some great ideas for reading them, sample of such a file:

Code:

---

<r>a-1,a-2,e-3</r>
<r>water-5,rock-3,rock-44</r>
<r>water-11,water-12,rock-1</r>

---

the parser needs to read out as well the different tile- seets used, in this example:
a,e,water,rock

PS.: window dragging is beeing worked on ;)

new update:
http://www.renderhjs.net/bbs/flashki...TileEditor.swf

http://www.renderhjs.net/bbs/flashki...screenshot.gif
- liquid GUI (repositions the windows on browser resize)
- support for multi library assosiations e.g (water-1,fire-2,b-8,...)
- library use listing, if you dont use any "default" will be applied to them
- map rendering1- just a very early attempt on rendering the map with multiple library support
- new panels in the work: layers, tools, map& draw

I am still not sure why on older Computers the CPU usage goes like crazy but my guess is that even with AS3 bitmap or pixel by pixel visualisation esspecially on large dimensions take lots of CPU usage. I checked the redraw regions but nothing fancy happening- just updating the button- regions.


as for map support it currently reads everything that meets the following conditions:
has to be a 2d- matrix (no iso, hexagonal,...)

row seperating recognized between:
(e.g <tag>5,7,8</tag><tag>9,10,11</tag> or array=[1,2,3],[4,5,6])
- \r\n
- \r
- \n
- ><
- ],[
- ],
- ,[

element seperating recognized between:
(e.g 5,8,7,9 or 2/4/9/2
- ,
- |
- /

row starting position recognized by:
(e.g <tag>4,5,6 or map=4,5,6,8)
- >
- [
- "
- =

(it seems that this bbs system could´t bold everything I marked as bold,- but I hope that most of you get what I mean)

I´d like to implement detection for tile Width and height settings like "tileW=32;tileH=32;" but i´d needed some suggestions for that what people write. Because i´d have to write another algorithm that would detect those parts by certain key- words and or conditions, like the characters "w" and "h" used and or the character "=". There are however so many ways people define that so I would like to hear some examples or suggestions.

i've got to be honest, while it looks nice, i have no idea how to use it.

Nothing seems to draw when i click and nothing seems to happen much when i click all the buttons. But i guess your still developing many of the features.

@mr_malee:
that´s because there is simply not much yet working. But what already works is basic map reading- so if you enter some kind of map file within that blue text field and hit "read" it should render the map in the map panel with tiles if used with different tiles mixed into 1.
Working without the Flash GUI but insead pure coding isn´t the easiest job for me- so some things need a little time as I still have to write lots of functions till basic functionality will work.


smal update (mainly GUI):
http://www.renderhjs.net/renderhjs/a...TileEditor.swf

worked on new palettes:
http://www.renderhjs.net/bbs/flashki...w_palettes.gif
(layer panel works already though it wont have visual impact yet on the map screen - even though the level data is for example swapped or deleted)
also none of the tools work yet- right now it just some icons & buttons placement for tools I have already planned.

Soon tile drawing should be working on layer basis,- but I still need to write some basic functions before