skoolkit generating sprites in html
-
- Drutt
- Posts: 13
- Joined: Wed Apr 10, 2019 8:46 am
skoolkit generating sprites in html
Anyone experienced with using skoolkit and can advise how I get a 16x16pixel image using the ctrl file to generate the html image?
As normal the 1st two bytes contain alternate bytes of the left/right top image cell and then the next two bytes contain the left/right byte for the bottom two cells of the image
Using UDGARRAY , but it doesn't seem to pick the correct bytes for the width/height of the image, feels like its just doing a normal 8 byte UDG, take first 8 bytes draw image, not whats wanted.
Thanks in advance
As normal the 1st two bytes contain alternate bytes of the left/right top image cell and then the next two bytes contain the left/right byte for the bottom two cells of the image
Using UDGARRAY , but it doesn't seem to pick the correct bytes for the width/height of the image, feels like its just doing a normal 8 byte UDG, take first 8 bytes draw image, not whats wanted.
Thanks in advance
Re: skoolkit generating sprites in html
Not experienced..! I found it a tad fiddly to faff about with trying to get the control file to generate the graphics as there are so many ways for them to be stored.
It's been a while but I remember finding it simpler to create a manual image file of the sprite. Then I just used #HTML in the control file in the right place, something like:
[mention]SkoolKid[/mention] may have the answer though..
It's been a while but I remember finding it simpler to create a manual image file of the sprite. Then I just used #HTML in the control file in the right place, something like:
Code: Select all
D 32768 #HTML(<img src="/images/sprite.png" alt="main sprite" />)
My Speccy site: thirdharmoniser.com
Re: skoolkit generating sprites in html
Sorry I didn't see this until now.Profmyster wrote: ↑Fri Dec 27, 2019 6:14 pm Anyone experienced with using skoolkit and can advise how I get a 16x16pixel image using the ctrl file to generate the html image?
[mention]Profmyster[/mention], if you're still around and still interested in getting your #UDGARRAY macro correct, reply or PM me and I'm sure we can get it working.
Re: skoolkit generating sprites in html
<minor bump>
Was recently playing with (the excellent) Skoolkit and trying to get my head round the #UDGARRAY macro. It got me wondering if the solution to this question was ever found?
I suspect quite a bit of 16 x 16 sprite graphic data is stored in a sort of 'A1-B1-A2-B2' byte pattern (or A1-B1-C1-D1 as in the original post).
Would be interesting to know if this can actually be rendered using the #UDGARRAY macro...? I suspect it might be do-able but the combination of possible parameters is making my head spin...!
Was recently playing with (the excellent) Skoolkit and trying to get my head round the #UDGARRAY macro. It got me wondering if the solution to this question was ever found?
I suspect quite a bit of 16 x 16 sprite graphic data is stored in a sort of 'A1-B1-A2-B2' byte pattern (or A1-B1-C1-D1 as in the original post).
Would be interesting to know if this can actually be rendered using the #UDGARRAY macro...? I suspect it might be do-able but the combination of possible parameters is making my head spin...!
My Speccy site: thirdharmoniser.com
Re: skoolkit generating sprites in html
Yes, the #UDGARRAY macro should be able to create an image of any sprite, so long as the arrangement of the graphic data isn't completely random.
For example, the 16x16 sprites of Miner Willy in Manic Miner are pretty simple. The first one can be done with:
This creates an image of the sprite with a width of 2 tiles, attribute 7 (INK 7: PAPER 0), scale 2, and step 2 (i.e. successive graphic bytes of each tile are spaced 2 apart). The first graphic byte of the first (top left) tile is at address 33280, the first graphic byte of the last (bottom right) tile is at 33297, the distance between the addresses of the first graphic bytes of the tiles in each row is 1, and the distance between the addresses of the first graphic bytes of the tiles in each column is 16.
A freebie for anyone reading: Describe the location and arrangement of the graphic data of a sprite in any game, and I'll compose a #UDGARRAY macro for it. Limited time offer. No refunds!
For example, the 16x16 sprites of Miner Willy in Manic Miner are pretty simple. The first one can be done with:
Code: Select all
#UDGARRAY2,7,2,2;33280-33297-1-16(willy)
A freebie for anyone reading: Describe the location and arrangement of the graphic data of a sprite in any game, and I'll compose a #UDGARRAY macro for it. Limited time offer. No refunds!
Re: skoolkit generating sprites in html
What are our options when it's ... random ... -ish?!
Here's what I used for Jetpac to render the entire ship;
Code: Select all
@replace=/#SHIP/#UDGARRAY2,attr=7,scale=4,step=2,flip=2;(#PC+$03);(#PC+$04);(#PC+$13);(#PC+$14);(#PC+$26);(#PC+$27);(#PC+$36);(#PC+$37);(#PC+$49);(#PC+$4A);(#PC+$59);(#PC+$5A)
; Compared to the more sane;
@replace=/#SPRITE2x2,\i/#UDGARRAY2,attr=\1,scale=4,step=2,flip=2;(#PC)-(#PC+$11)-$01-$10
Code: Select all
N $7C65 Ship U3
N $7C65 #SHIP(ship-u3)
B $7C65,1 terminator
B $7C66,1 width = #PEEK(#PC) bytes
B $7C67,1 height = #PEEK(#PC) pixels
B $7C68 #SPRITE2x2,7(ship-u3-1)
N $7CCE #SHIP(ship-u1)
; etc
N $7D37 #SHIP(ship-u2)
; etc
N $7DA0 #SHIP(ship-u4)
; etc
PS. Also ... can I just say, skoolkit is a truly amazing piece of software. Thank you so much for building it!
Re: skoolkit generating sprites in html
Hmm, that layout is a bit unusual. The best I can do to shorten the #SHIP macro is to use a single #FOR loop:
Thanks for the kind words about SkoolKit, by the way, and extra marks for using the #PC macro (which shows you're running a recent version).
Code: Select all
@replace=/#SHIP/#UDGARRAY#(2,attr=7,scale=4,step=2,flip=2#FOR($03,$49,$23)(n,;(#PC+n);(#PC+n+$01);(#PC+n+$10);(#PC+n+$11)))
Re: skoolkit generating sprites in html
That's very nice!!! Thank you so much!
And yeah, I'm loving the PC macro! It makes the replacements so nice and neat. I know you could pass them back before but just using say;
Makes the control file so much easier to look through visually.
And yeah, I'm loving the PC macro! It makes the replacements so nice and neat. I know you could pass them back before but just using say;
Code: Select all
@replace=/#ITEM,\i/#UDGARRAY2,attr=\1,scale=4,step=2,flip=2;(#PC)-(#PC+$11)-$01-$10{0,($10-#PEEK(#PC-1))*4,$10*4,#PEEK(#PC-1)*4}
@replace=/#DIMENSIONS/Dimensions #PEEK(#PC+1) bytes x #EVAL(#PEEK(#PC+2),10,2) pixels
...
..
.
N $7E6B Bean
N $7E6B #DIMENSIONS
B $7E6B,1 terminator
B $7E6C,1 width = #PEEK(#PC) bytes
B $7E6D,1 height = #PEEK(#PC) pixels
B $7E6E #ITEM,3(item-5)
N $7E80 Diamond
N $7E80 #DIMENSIONS
B $7E80,1 terminator
B $7E81,1 width = #PEEK(#PC) bytes
B $7E82,1 height = #PEEK(#PC) pixels
B $7E83 #ITEM,3(item-6)
Re: skoolkit generating sprites in html
Looking at your #ITEM macro makes me realise I missed a trick when trying to shorten the #SHIP macro. Here's a slightly improved version that makes use of the horizontal and vertical step syntax:
I don't think that can be improved on, but you can never be sure when it comes to #UDGARRAY macro optimisation!
Code: Select all
@replace=/#SHIP/#UDGARRAY#(2,attr=7,scale=4,step=2,flip=2#FOR($03,$49,$23)(n,;(#PC+n)-(#PC+n+$11)-$01-$10))
Re: skoolkit generating sprites in html
Ah - that's it.. It's actually quite logical when explained (it was the -1-16 bit I was getting wrong), but it properly 'clicked' with that example, thanks..!SkoolKid wrote: ↑Fri May 29, 2020 10:21 pm Yes, the #UDGARRAY macro should be able to create an image of any sprite, so long as the arrangement of the graphic data isn't completely random.
For example, the 16x16 sprites of Miner Willy in Manic Miner are pretty simple. The first one can be done with:
Code: Select all
#UDGARRAY2,7,2,2;33280-33297-1-16(willy)
My Speccy site: thirdharmoniser.com
Re: skoolkit generating sprites in html
Ha! So very true and many thanks for this! I love working these out, it's like when you finally figure out a tricky regex ~ seeing it come to life when you run it is a very nice feeling!
Re: skoolkit generating sprites in html
OK, here's another one... This time, animations..! But still related to #UDGARRAY so I've kept it here.
I'm trying to generate a 2-step animation image.
I think I've managed to generate & display the two sprite images/frames - I've got this:
...They display fine. Next, I've managed to successfully create an animated image from these, with:
Yay, it works... But how can I put the animation graphic before the static images? So, for example, instead of
N 41212 ...
...use something like...
N 41176 ...?
If I try to do this, I get "Error while parsing #UDGARRAY macro: No such frame: "sprite-frame-1"
I guess it's because the frames aren't created until 41184..? Is there an easy way round this?
Alternatively, how do I display just the animation image, without displaying the (static) images?
I'm trying to generate a 2-step animation image.
I think I've managed to generate & display the two sprite images/frames - I've got this:
Code: Select all
N 41184 #HTML[#UDGARRAY1,4,4,1;41184-41199-8{0,0,32,64}(sprite-frame-1*)]
.
.
N 41204 #HTML[#UDGARRAY1,4,4,1;41204-41219-8{0,0,32,64}(sprite-frame-2*)]
Code: Select all
N 41212 #HTML[#UDGARRAY*sprite-frame-1,50;sprite-frame-2(animated-frames)]
N 41212 ...
...use something like...
N 41176 ...?
If I try to do this, I get "Error while parsing #UDGARRAY macro: No such frame: "sprite-frame-1"
I guess it's because the frames aren't created until 41184..? Is there an easy way round this?
Alternatively, how do I display just the animation image, without displaying the (static) images?
My Speccy site: thirdharmoniser.com
Re: skoolkit generating sprites in html
Yes, you can't use a frame until it's been defined (macros are expanded in the order in which they appear in the skool file).
To hide (i.e. create no file for) the static images and show only the animated image, you need a slight change of syntax when creating the sprite frames:
Also, can I ask why you're using the #HTML macro around the #UDGARRAY macros? There's nothing wrong with doing that, but I'm just wondering whether it's necessary.
To hide (i.e. create no file for) the static images and show only the animated image, you need a slight change of syntax when creating the sprite frames:
Code: Select all
#UDGARRAY1,4,4,1;41184-41199-8{0,0,32,64}(*sprite-frame-1)
#UDGARRAY1,4,4,1;41204-41219-8{0,0,32,64}(*sprite-frame-2)
#UDGARRAY*sprite-frame-1,50;sprite-frame-2(animated-frames)
Re: skoolkit generating sprites in html
Ah yes - that works a treat. Thanks. I thought I'd tried the alternate asterisk placement, but I suspect my syntax was wrong somewhere.
You're right, the #HTML shouldn't be there, perhaps I was using it for something else earlier and have been mindlessly copying and pasting it... Am finding it fairly commonplace to suddenly realise I've been doing things badly and there's a better command/macro, and then need to go back and change things.
You're right, the #HTML shouldn't be there, perhaps I was using it for something else earlier and have been mindlessly copying and pasting it... Am finding it fairly commonplace to suddenly realise I've been doing things badly and there's a better command/macro, and then need to go back and change things.
My Speccy site: thirdharmoniser.com
Re: skoolkit generating sprites in html
Indeed.
One thing I'm learning from is that disassembly is a marathon, not a sprint..!
Anyway, I've got another one...
I've got a bunch of 2-column sprites where left/right graphics are stored separately. Each graphic has a byte immediately before the graphic data indicating how many pixel rows it contains. Something like this:
Code: Select all
41926 DEFB 7, 120,71,64,64,64,71,120
41962 DEFB 3, 224,28,224
So in this example the left-side graphic consists of 7 pixel rows, and the right-side graphic 3 pixel rows.
Any suggestions for how to present this sprite neatly using the #UDGARRAY, or other macros?
I was wondering if I could 'pad' the second graphic with zeros somehow (the opposite of a CROP)?
My Speccy site: thirdharmoniser.com
Re: skoolkit generating sprites in html
This definitely can't be done by #UDGARRAY alone, because the graphic data's not arranged in groups of 8 bytes.
One possible approach is to create a buffer, copy the desired graphic data there such that it is arranged in groups of 8 bytes, and then point #UDGARRAY at the buffer. For example:
Code: Select all
@replace=/#copy\i,\i/#FOR(0,#PEEK\1-1)(n,#POKES(\2+n,#PEEK(\1+n+1)))
; Sprite
;
; #POKES23296,0,16
; #copy41926,23296
; #copy41962,23306
; #UDGARRAY2,scale=4;23296;23304(sprite)
b41926 DEFB 7,120,71,64,64,64,71,120
41934 DEFS 28
41962 DEFB 3,224,28,224
A bit cumbersome, but you could encapsulate it all in a single custom macro that does it in one shot, if needed.
Re: skoolkit generating sprites in html
Ah cool, thanks - nice to know there are ways...
Will have a proper look at that @replace directive at some point, probably after some caffeine so I can get my head round the syntax/parameters. Though I get the idea of what it's doing.
...Come to think of it I haven't used #FOR, #PEEK or #POKES yet so I'd better have a look at those first...
Will have a proper look at that @replace directive at some point, probably after some caffeine so I can get my head round the syntax/parameters. Though I get the idea of what it's doing.
...Come to think of it I haven't used #FOR, #PEEK or #POKES yet so I'd better have a look at those first...
My Speccy site: thirdharmoniser.com
Re: skoolkit generating sprites in html
I need your consultation.
I'm trying to create .png of a sprite made of indexes. $DDF9 is the start adress of bytes with index #00
and used this construction for doing that:
It works fine, finds the appropriate bytes at the calculated addresses and builds a b/w sprite:
But I just failed when I tried to insert another inner #FOR construction for making attributes.
I hoped it would be like this, but the answer is NO:
The only way to use attributes is very clumsy:
How could I solve it in a simple way
I'm trying to create .png of a sprite made of indexes. $DDF9 is the start adress of bytes with index #00
Spoiler
Code: Select all
b $7929 DESK WITH A CHAIR
B $7929,30,6
D $7929 #UDGARRAY#(6#FOR$7929,$7946,1||n|;(#PEEKn*9+$DDF9)||)(7929h)
It works fine, finds the appropriate bytes at the calculated addresses and builds a b/w sprite:
But I just failed when I tried to insert another inner #FOR construction for making attributes.
I hoped it would be like this, but the answer is NO:
Code: Select all
D $7929 #UDGARRAY#(6#FOR$7929,$7946,1||n|;(#PEEKn*9+$DDF9)||@#(#FOR$7929,$7946,1||n|;(#PEEKn*9+$DDF9+8)||(7929h)))
The only way to use attributes is very clumsy:
Code: Select all
D $7929 #UDGARRAY#(6#FOR$7929,$7946,1||n|;(#PEEKn*9+$DDF9)||@$DE01x2;$E1C4x2;$DE01x2;$E1D6x8;$E1C4x2;$E1D6x4;$DE01x2;$E1D6x2;$DE01x6(7929h))
Re: skoolkit generating sprites in html
It looks like you're pretty close already. Try this:
Code: Select all
#UDGARRAY#(6#FOR$7929,$7946,1||n|;(#PEEKn*9+$DDF9)||@#FOR$7929,$7946,1||n|(#PEEKn*9+$DDF9+8)|;||(7929h))
Re: skoolkit generating sprites in html
Thank you. You are a great master!
I was playing with that second half of the line in one way, then another, but had mistakes all the same(I'm a newbee to your Skoolkit yet)
Could I sometimes ask you more questions about using Skoolkit here later? Or is there a special Skoolkit forum somewhere?
I was playing with that second half of the line in one way, then another, but had mistakes all the same(I'm a newbee to your Skoolkit yet)
Could I sometimes ask you more questions about using Skoolkit here later? Or is there a special Skoolkit forum somewhere?
Re: skoolkit generating sprites in html
Sure. This is as good a place as any for asking questions about SkoolKit. There's no dedicated SkoolKit forum anywhere, unless someone created one without telling me about it.