skoolkit generating sprites in html

The place for codemasters or beginners to talk about programming any language for the Spectrum.
Post Reply
Profmyster
Drutt
Posts: 13
Joined: Wed Apr 10, 2019 8:46 am

skoolkit generating sprites in html

Post by Profmyster »

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
User avatar
Morkin
Bugaboo
Posts: 3251
Joined: Mon Nov 13, 2017 8:50 am
Location: Bristol, UK

Re: skoolkit generating sprites in html

Post by Morkin »

Not experienced..! :lol: 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:

Code: Select all

D 32768 #HTML(<img src="/images/sprite.png" alt="main sprite" />)
[mention]SkoolKid[/mention] may have the answer though.. :)
My Speccy site: thirdharmoniser.com
User avatar
SkoolKid
Manic Miner
Posts: 403
Joined: Wed Nov 15, 2017 3:07 pm

Re: skoolkit generating sprites in html

Post by SkoolKid »

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?
Sorry I didn't see this until now.

[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. :)
SkoolKit - disassemble a game today
Pyskool - a remake of Skool Daze and Back to Skool
User avatar
Morkin
Bugaboo
Posts: 3251
Joined: Mon Nov 13, 2017 8:50 am
Location: Bristol, UK

Re: skoolkit generating sprites in html

Post by Morkin »

<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...! :shock:
My Speccy site: thirdharmoniser.com
User avatar
SkoolKid
Manic Miner
Posts: 403
Joined: Wed Nov 15, 2017 3:07 pm

Re: skoolkit generating sprites in html

Post by SkoolKid »

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)
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!
SkoolKit - disassemble a game today
Pyskool - a remake of Skool Daze and Back to Skool
pobtastic
Drutt
Posts: 29
Joined: Fri May 29, 2020 8:21 pm
Location: United Kingdom

Re: skoolkit generating sprites in html

Post by pobtastic »

SkoolKid wrote: Fri May 29, 2020 10:21 pm ...so long as the arrangement of the graphic data isn't completely random.
What are our options when it's ... random ... -ish?! :D

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
It works well enough, I just can't help but think it could be neater? Obviously it flits between 16 and 19 bytes between each section but it's not random, there is at least a pattern to it.

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
I suspect I just need two #FOR loops but that also feels more messy than what I have already!

PS. Also ... can I just say, skoolkit is a truly amazing piece of software. Thank you so much for building it!
User avatar
SkoolKid
Manic Miner
Posts: 403
Joined: Wed Nov 15, 2017 3:07 pm

Re: skoolkit generating sprites in html

Post by SkoolKid »

Hmm, that layout is a bit unusual. The best I can do to shorten the #SHIP macro is to use a single #FOR loop:

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)))
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). :)
SkoolKit - disassemble a game today
Pyskool - a remake of Skool Daze and Back to Skool
pobtastic
Drutt
Posts: 29
Joined: Fri May 29, 2020 8:21 pm
Location: United Kingdom

Re: skoolkit generating sprites in html

Post by pobtastic »

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;

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)
Makes the control file so much easier to look through visually.
User avatar
SkoolKid
Manic Miner
Posts: 403
Joined: Wed Nov 15, 2017 3:07 pm

Re: skoolkit generating sprites in html

Post by SkoolKid »

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:

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))
I don't think that can be improved on, but you can never be sure when it comes to #UDGARRAY macro optimisation!
SkoolKit - disassemble a game today
Pyskool - a remake of Skool Daze and Back to Skool
User avatar
Morkin
Bugaboo
Posts: 3251
Joined: Mon Nov 13, 2017 8:50 am
Location: Bristol, UK

Re: skoolkit generating sprites in html

Post by Morkin »

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)
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..! :)
My Speccy site: thirdharmoniser.com
pobtastic
Drutt
Posts: 29
Joined: Fri May 29, 2020 8:21 pm
Location: United Kingdom

Re: skoolkit generating sprites in html

Post by pobtastic »

SkoolKid wrote: Sat May 30, 2020 10:08 pm I don't think that can be improved on, but you can never be sure when it comes to #UDGARRAY macro optimisation!
Ha! So very true :lol: 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!
User avatar
Morkin
Bugaboo
Posts: 3251
Joined: Mon Nov 13, 2017 8:50 am
Location: Bristol, UK

Re: skoolkit generating sprites in html

Post by Morkin »

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:

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*)]
...They display fine. Next, I've managed to successfully create an animated image from these, with:

Code: Select all

N 41212 #HTML[#UDGARRAY*sprite-frame-1,50;sprite-frame-2(animated-frames)]
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?
My Speccy site: thirdharmoniser.com
User avatar
SkoolKid
Manic Miner
Posts: 403
Joined: Wed Nov 15, 2017 3:07 pm

Re: skoolkit generating sprites in html

Post by SkoolKid »

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:

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)
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.
SkoolKit - disassemble a game today
Pyskool - a remake of Skool Daze and Back to Skool
User avatar
Morkin
Bugaboo
Posts: 3251
Joined: Mon Nov 13, 2017 8:50 am
Location: Bristol, UK

Re: skoolkit generating sprites in html

Post by Morkin »

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... :roll: 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
pobtastic
Drutt
Posts: 29
Joined: Fri May 29, 2020 8:21 pm
Location: United Kingdom

Re: skoolkit generating sprites in html

Post by pobtastic »

Morkin wrote: Fri Jun 05, 2020 6:09 pm 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.
Haha that's all part of the fun! :lol:
User avatar
Morkin
Bugaboo
Posts: 3251
Joined: Mon Nov 13, 2017 8:50 am
Location: Bristol, UK

Re: skoolkit generating sprites in html

Post by Morkin »

pobtastic wrote: Fri Jun 05, 2020 11:07 pm Haha that's all part of the fun! :lol:
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

Image

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
User avatar
SkoolKid
Manic Miner
Posts: 403
Joined: Wed Nov 15, 2017 3:07 pm

Re: skoolkit generating sprites in html

Post by SkoolKid »

Morkin wrote: Sat Jun 06, 2020 11:37 am Any suggestions for how to present this sprite neatly using the #UDGARRAY, or other macros?
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
Here we're creating a custom #copyX,Y macro that copies 'PEEK X' bytes from address X+1 to address Y, and using it to build a two-column sprite in the 16-byte buffer at 23296 (previously cleared by the #POKES macro) that #UDGARRAY can handle.

A bit cumbersome, but you could encapsulate it all in a single custom macro that does it in one shot, if needed.
SkoolKit - disassemble a game today
Pyskool - a remake of Skool Daze and Back to Skool
User avatar
Morkin
Bugaboo
Posts: 3251
Joined: Mon Nov 13, 2017 8:50 am
Location: Bristol, UK

Re: skoolkit generating sprites in html

Post by Morkin »

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...
My Speccy site: thirdharmoniser.com
yashcher
Drutt
Posts: 2
Joined: Tue Jul 21, 2020 6:29 pm

Re: skoolkit generating sprites in html

Post by yashcher »

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
Spoiler
Image

Image
and used this construction for doing that:

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:Image

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: Image

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))
How could I solve it in a simple way :?:
User avatar
SkoolKid
Manic Miner
Posts: 403
Joined: Wed Nov 15, 2017 3:07 pm

Re: skoolkit generating sprites in html

Post by SkoolKid »

yashcher wrote: Tue Jul 21, 2020 7:49 pm How could I solve it in a simple way :?:
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))
SkoolKit - disassemble a game today
Pyskool - a remake of Skool Daze and Back to Skool
yashcher
Drutt
Posts: 2
Joined: Tue Jul 21, 2020 6:29 pm

Re: skoolkit generating sprites in html

Post by yashcher »

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?
User avatar
SkoolKid
Manic Miner
Posts: 403
Joined: Wed Nov 15, 2017 3:07 pm

Re: skoolkit generating sprites in html

Post by SkoolKid »

yashcher wrote: Tue Jul 21, 2020 9:15 pm Could I sometimes ask you more questions about using Skoolkit here later?
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. :)
SkoolKit - disassemble a game today
Pyskool - a remake of Skool Daze and Back to Skool
Post Reply