Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / How should do this?? (resizable sprite without losing aspect)

Author
Message
easter bunny
12
Years of Service
User Offline
Joined: 20th Nov 2012
Playing: Dota 2
Posted: 3rd Jun 2013 08:50
I need to have sprites that don't get stretched when they're resized.
the image is pure white with a solid colour border (colour changed in-game).
But when it's resized, the border changes size as well (completely messing up the way it looks).
The ways of solving this seem to be limited to the following:
Have a bunch of different sized images (bad idea because I'd need about 50 :/)
Have two images, the inner (solid colour) is sized and the other is made into 4 sprites and resized then set around the border (I tried this, but it was too difficult)
Use Memblocks, this seems like the best way, but as I've never used memblocks before, I need some help. can someone please show me what to do!
Here is the way it works so far:

function MakeWall(x#,y#,xs#,ys#,a#) `xpos, ypos, xsize, ysize, angle
inc wallc,1 `wall counter
if wallc>99 then wallc=1
wall[wallc].id=Createsprite(img.white) `wall[] is an array of a UDT
SetspriteSize(wall[wallc].id,xs#,ys#) `Set the size
-----------more code------------
I need to use a Memblock that has the same dimensions as the sprite, is pure white, but is 150 alpha throughout the middle with a (2 pixel thick) border of 240 alpha.

baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 3rd Jun 2013 10:34 Edited at: 3rd Jun 2013 10:35
Why not just make it out of five sprites (no images) that are coloured?

You make the background colour from one sprite and stretch a 2 pixel wide sprite to the size of the main sprite for each edge [example]:



this.mess = abs(sin(times#))
Van B
Moderator
22
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 3rd Jun 2013 10:36
You could use 2 sprites - like just get a solid white image, and make 2 sprites.

Set 1 sprite to depth 10, colour it with the border colour, and set the size to whatever you need.
Set another sprite to depth 9, colour it white or the internal colour, and set the size to whatever you need -2.

That would give a solid box with a coloured border, and you'd be able to set the colour to whatever you want, and change the position, size, and even border width.

I got a fever, and the only prescription, is more memes.
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 3rd Jun 2013 10:48
VanB, the centre needs to be transparent so the borders need to be made separate. My example is using drawSprite which may not suit your needs but it shows you how to position and scale the sprites easily. I just noticed the borders need to be slightly transparent too so you may get an overlap using my exact code, to avoid it just adjust the sizes and positions of two of the side sprites so they don't overlap anymore.


this.mess = abs(sin(times#))
easter bunny
12
Years of Service
User Offline
Joined: 20th Nov 2012
Playing: Dota 2
Posted: 3rd Jun 2013 12:37 Edited at: 3rd Jun 2013 12:38
The problem is that some of them need to be on angles, which would mean using trig (something I've never been good at), thats why I'm thinking memblocks. Some of them use dynamic physics, so basically, to do it what way, baxslash, It'd be a matter of getting the angle of the sprite and calculating the positions as needed (would it be best to do that with 4 extra sprites, or the drawsprite command?)

Van B
Moderator
22
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 3rd Jun 2013 13:07
Ahh never noticed the transparency bit Baxslash.... must be Monday.

For rotation, you could just offset the border sprites to suit - like setting the offset of the right border to -32, would put it 32 pixel to the right of the centre. Then rotate all the sprites to the same angle and they should stay as a box.

I got a fever, and the only prescription, is more memes.
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 3rd Jun 2013 13:58
Here's a function that creates the image for you. Hope it helps... I was bored




this.mess = abs(sin(times#))
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 3rd Jun 2013 14:47 Edited at: 3rd Jun 2013 14:47
@baxslash
??? i think you mean setMemblockinteger(mem,8,32)
for i=8 to 11
setMemblockByte(mem,i,32)
next
AgentSam
12
Years of Service
User Offline
Joined: 14th Mar 2012
Location: Virtual Space
Posted: 3rd Jun 2013 15:42
@Baxslash:

In addition to what Markus wrote, is there a reason why you don't just use SetMemBlockInt for all of those header values? o_O

As in:

Replace


With



Cheers,
Agentsam
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 3rd Jun 2013 16:58 Edited at: 3rd Jun 2013 17:40
I haven't tried it that way, does it work?

Edit: Yes it does - you learn something new every day. I haven't used memblocks much yet other than in my spritesheet maker.



this.mess = abs(sin(times#))
MarcoBruti
13
Years of Service
User Offline
Joined: 20th Nov 2011
Location: Caput Mundi
Posted: 3rd Jun 2013 17:52
@AgentSam: aren't you a good programmer? Your valuable piece of advice to Baxslash shows that I was right
AgentSam
12
Years of Service
User Offline
Joined: 14th Mar 2012
Location: Virtual Space
Posted: 3rd Jun 2013 18:10
@MarcoBruti:
Quote: "aren't you a good programmer"


I'm just a plain old grumpy complainer.

Cheers,
AgentSam
easter bunny
12
Years of Service
User Offline
Joined: 20th Nov 2012
Playing: Dota 2
Posted: 4th Jun 2013 02:56
Thanks Baxslash, that's perfect!

Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 4th Jun 2013 10:39
Might be quicker to write the color data as a single integer rather than in 4 separate bytes.

baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 4th Jun 2013 11:00
Phaelax, I'm pretty new to memblocks, how would I do that in this example? I'm keen to know as it would most likely speed up a number of uses I have for this kind of function.


this.mess = abs(sin(times#))
AgentSam
12
Years of Service
User Offline
Joined: 14th Mar 2012
Location: Virtual Space
Posted: 4th Jun 2013 11:46 Edited at: 4th Jun 2013 11:49
@Phaelax:

I'm going to answer Baxslash since you're offline. But if you had
something different or even more efficient in mind, let us know!

@Baxslash:

Basically, you'd convert this:



To this:



In order to utilize the above, you'd also need a function to convert
the individual RGBA components into the composite RGBA value that
can be fed into SetMemBlockInt.

So, here's an example of such a function:



Also, we need to fix createBoxImage declaration so that it includes
the color values as parameters:



Now, when calling "createBoxImage", you'd call...



The idea is, that you can keep the BorderColor and CenterColor
values for later use.. so if you make multiple calls to "createBoxImage"
using the same values, then you only need to create the value with
"rgba_to_int" once - and createBoxImage will be more efficient due to
the 32-bit write operations, when it does "SetMemblockInt(mem, d, color)",
instead of 4 separate byte writes.

Cheers,
AgentSam
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 4th Jun 2013 12:04 Edited at: 4th Jun 2013 12:22
Thanks Sam, I'll go through this and add it to my own version. I wasn't too bothered about adding the colour options to the function call as it was for a specific purpose but it certainly makes easier for future use.

Cheers!

Edit: How would I extract just the rgba values from that integer?


this.mess = abs(sin(times#))
AgentSam
12
Years of Service
User Offline
Joined: 14th Mar 2012
Location: Virtual Space
Posted: 4th Jun 2013 12:49 Edited at: 4th Jun 2013 12:51
Quote: "How would I extract just the rgba values from that integer?"


This would be one way of doing it, with a single function:



To use it, you would need to declare a variable of type TRGBA that can hold the return value.

Assuming you had an int color in a variable called "SomeColorValue", you'd break it apart with:

AllColors as TRGBA
AllColors = int_to_rgba(SomeColorValue)

Then you can access each element as AllColors.red, AllColors.green, etc..

(I don't want to go into too much detail, since I know you know this.. but perhaps it helps
someone who's new to UDTs. Also, I guess it's a decent example of using bitwise operators.)

Cheers,
AgentSam
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 4th Jun 2013 12:56 Edited at: 4th Jun 2013 12:59
Thanks Sam, that helps a lot

Edit: Here are the simplified functions I've made from that. Spot anything dumb Sam?



this.mess = abs(sin(times#))
AgentSam
12
Years of Service
User Offline
Joined: 14th Mar 2012
Location: Virtual Space
Posted: 4th Jun 2013 13:06 Edited at: 4th Jun 2013 13:11
No, nothing dumb. Those are great, and propably easier for most users.

(I guess I'm just a big fan of encapsulation, really, so I tend to use a lot of user defined types.)

I sort of also made a small example project... so I'll just paste it here for the benefit of our
readers. It compiles directly, so.. easy for testing.



Cheers,
AgentSam

Login to post a reply

Server time is: 2024-11-24 15:48:32
Your offset time is: 2024-11-24 15:48:32