Window with scrollbar that displays sprites?

Blitz3D Forums/Blitz3D Programming/Window with scrollbar that displays sprites?

Guy Fawkes(Posted 2012) [#1]
Hi all. I would like to know how to draw an image in a "textarea-like" window. So that I can load up as big of a spritesheet as i want for my 2d level editor.


Any help would be GREATLY appreciated! :)


Thank you! :)


Kryzon(Posted 2012) [#2]
Hi. Have you given it a try? Have you turned your computer off and taken time to design how this will work (with just pen and paper, no electronics)? you'll be amazed with what you can achieve by just giving yourself the proper time.

If you can prove to me that after your best effort with doing the above you can't find the solution, I'll gladly help.
I'm not being an *sshole: to my view, this is more to your benefit than mine.

Hint: DrawImageRect.


Guy Fawkes(Posted 2012) [#3]
Where do I start with getting the WHOLE sprite into a textarea window?


Also, I HAVE tried.


I got it to animate... problem is...


I need to be able to use a rectangle to select part of a 32 x 23 frameswide and frameshigh image.


Here is what I have so far:





Edit: Here's the example:


http://www.mediafire.com/?0y1up0kh95o50hl


Enjoy! :)


Thanks for the help, Kryzon! :)

Last edited 2012


Kryzon(Posted 2012) [#4]
Hi. I don't understand what you want. You want to do a Tile Picker?

You still haven't proved to me that you spent time outside the computer thinking analytically how to develop this tool.
Put your ideas on paper:
• How you want the tiles to be arranged (any padding between them? are they on original size?);
• What the rectangular marker that indicates the current tile is going to look like;
• How to map the mouse position to that finite grid of 32x32 blocks (this is not simple; you'll have to spend a lot of time thinking the solution to this. I spend a lot of time too when I'm trying to think of something complicated).

All this planning is what I want to see you come up with.

Last edited 2012


Guy Fawkes(Posted 2012) [#5]
Woh woh woh.. I spent 44 minutes drawing u up a blueprint of how i need it.... Please do not tell me that im not trying... because I am.


Guy Fawkes(Posted 2012) [#6]
I just NOW finished it.. here it is


Guy Fawkes(Posted 2012) [#7]
Sorry, helping a friend with a virus.


anyway, here it is:


http://www.mediafire.com/i/?3ccetde3et14sd3


sorry for the delay


Kryzon(Posted 2012) [#8]
What is it about that screen that you don't know how to produce in Blitz3D?

Concurrently, take a look at this:
http://web.archive.org/web/20041206000159/http://www.blitzcoder.com/cgi-bin/articles/show_article.pl?f=gameclyde07092002.html


Guy Fawkes(Posted 2012) [#9]
The textarea with the sprites in it.


Ross C(Posted 2012) [#10]
Things you will need to know, and should store about each sprite.

It's x and y co-ord. It's width and depth. Whether it is being selected. The image of the actual sprite.

You will need to know the size of the area the sprites will be put it. It's x and y co-ord and it's width and depth.

If you know these things, minus the scroll bar, you are on your way.

When drawing the tiles, you should use the x and y co-ords of the tile window the sprites will be drawn to/in. This should be your start point for any drawing operations. Before drawing, you should calculate how many tiles you can fit width wise, and how many you can fit height wise. No point in drawing tiles that won't fit on screen. You should have a padding value, to give the option of having space between each tile.

I'm assuming all your tiles are of the same dimension. You will divide your window width by the tile width plus the padding value:

number of tiles wide = window width DIVIDED BY (tile width + padding value)

That way you can give your loop a value when looping through your drawing.

You will do the same for working out how many tiles high you can fit.

For x_loop = 0 to number of tiles wide - 1 (because you are starting from 0 so your spacing will work)

   For y_loop = 0 to number of tiles high - 1

       drawimage sprite , window_x + (x_loop * (sprite_width + x_padding)), window_y + (y_loop * (sprite_height + y_padding))

  Next

Next


That's the basics for drawing it. Simple stuff.

Last edited 2012


Guy Fawkes(Posted 2012) [#11]
Thanks alot, Ross :) I will implement that, then get back to u on how to implement the scrollbars for infinite space of a HUGE spritesheet :)


Guy Fawkes(Posted 2012) [#12]
Ok, here's what I have so far. it's kinda messing up.. I cant get it to draw each frame seperately in sets of 2s like this:


Frame 1 | Frame 2
Frame 3 | Frame 4



Etc.......


If u need the media that comes with it, just scroll up to my older post, and download the RAR file, extract the files to a folder, open the source, then copy and paste this new code into it:





Thanks again, Ross! :)

Last edited 2012


Ross C(Posted 2012) [#13]
You've got your variable definitions inside the main loop. You need to declare and set them outside of the loop

You need to explain exactly what your trying to do. I though you were just drawing the individual frames in a window at the left. I'm not going to give you any code for this. You'll have to break down exactly what your trying to do and code each piece.

Drawing the bigger anim image to the right of the smaller? And why are you drawing them in sets of 2?

You also seem to be drawing the same frame over and over. You need to change the frame your drawing, using the loop variables. If you are drawing them sequencially, then you need to loop through them.

I see as well your setting your x loop to the total number of frames. You need to calculate how many frames you will fit in your window width wise. The way your doing it, you will draw the same thing over and over again.


Guy Fawkes(Posted 2012) [#14]
what im trying to do, is load 1 ENTIRE sprite sheet, and split it up into selectable tiles, selectable being that i mouse over a tile, and a rect box appears at that tile's coordinates


Ross C(Posted 2012) [#15]
Ok, so you'll want the tiles to fill the window then. You need to find the width of the window, divide it by the width of the tile plus the padding. That way you can set your x_loop to draw that many tiles. The same applies really to the number of tiles you can fit in height wise.


Guy Fawkes(Posted 2012) [#16]
Here's what I got so far.. But it's still not splitting them up into tiles.





Guy Fawkes(Posted 2012) [#17]
Specifically,




Last edited 2012


Ross C(Posted 2012) [#18]
DrawImage image, (GraphicsWidth()/32 + x_padding), (GraphicsHeight()/32 + y_padding)


This line is drawing an image at graphics width/32, graphicsheight /32 1024. The same image, and the co-ords are not changing.

I don't think your understand what is happening with your own code, and what it's actually doing.

I have looked at your sprite sheet. The tiles are all different sizes, and you'll need to draw the spritesheet, exactly how it appears. You way of counting frames will be completely incorrect. For the spritesheet that is in that zip file i downloaded, you will need to know a start location for the tiles, before you can read them. Doing otherwise will start blitz cutting tiles from the top left hand corner, into 32 x 32 chunks.

To be honest, that spritesheet is fairly useless to use with LoadAnimImage. You would need to know the start locations of the big massive tile, plus the individual characters on it. Loadanimimage works well on a standard grid layout animation strip.

Your going to need to use drawimagerect to use this spritesheet.

Unless your using another spritesheet I haven't seen?

Last edited 2012


Kryzon(Posted 2012) [#19]
Wow man. All this time and you still haven't taken time to plan this like I said 2 times already in this thread - you are still expecting people to solve your problems.
You are not taking time to think how to make the computer do what you want. Mark my words: it will never work this way you're doing it.

I bet you didn't give much attention to that article I linked to either (which, by the way, explained how to use nested loops to draw tiles like Ross C wrote himself afterwards - check the "Showing the Map" section of that article).
Following that article and making changes to it would teach you more than anything anyone could write here.

I can't help you if you won't help yourself. I suggest you close this forum and go think for yourself based on changes you make to the BlitzCoder articles that you can find here: http://web.archive.org/web/20051124131921/http://www.blitzcoder.com/articles.shtml

Or use RPGMaker altogether. It's a great tool.


Ross C(Posted 2012) [#20]
Sorry Kryzon, I missed the part you said about drawimagerect. The spritesheet isn't designed for loadanimimage anyway, so it wouldn't work...


Guy Fawkes(Posted 2012) [#21]
sigh. i might have to stick with RPGMaker... the only reason im trying to make my own, is because the internet protocol is HARD to use...


Kryzon(Posted 2012) [#22]
Hi Ross, that was directed towards Rez. I don't know what you're talking about! :)

I think LoadAnimImage would work with an atlas, because as soon as the right-most frame of the image gets loaded, if there's more space further down then Blitz3D starts loading the bottom frames and keeps doing that until there are no more full frames to be loaded.
You can arrange your frames as a strip or as a sheet; I think it'd work both ways.


Ross C(Posted 2012) [#23]
You haven't seen the spritesheet then. The frames are all over the place. They are not laid out in a grid fashion and don't line up correctly. Sorry, I know you didn't direct that to me.


Kryzon(Posted 2012) [#24]
sigh. i might have to stick with RPGMaker... the only reason im trying to make my own, is because the internet protocol is HARD to use...

Hi. Okay, I think I have a better suggestion this time. Take that link to the BlitzCoder articles and have at them, especially the ones by Krylar.

They played a major part in me learning BBasic (the other parts were these forums and the Code Archives), and there are several topics of interest for you.
The key to getting any experience out of them is playing with them: make changes of your own to the sources of those articles, and see how those changes result when you run the code.

Depending only on forums (like you're doing now) is not going to get you far; that's why relying on those BlitzCoder articles is paramount to you.

Best of luck.

Last edited 2012


Ross C(Posted 2012) [#25]
Don't give up. You need to learn this basic stuff if you want to code. You need to try some real simple stuff. If you want, we could set you challenges and you have to code the solution. Start off easy and get harder.


Guy Fawkes(Posted 2012) [#26]
problem is..... the real hard stuff is easy for me in some areas, and the easy stuff is REAL hard in all areas. X_X


Ross C(Posted 2012) [#27]
Well, you need to work on the easy stuff. It's the foundation of coding. You can't do the hard stuff without it.


Kryzon(Posted 2012) [#28]
"The best way to do a complicated task is to break it down to small, feasible steps and then start on the first one."

Find a BlitzCoder article under "Blitz Basic Newbies" - don't take offense with the word, the best stuff is there:

http://web.archive.org/web/20051124131921/http://www.blitzcoder.com/articles.shtml

The key to getting any experience out of them is playing with them: make changes of your own to the sources of those articles, and see how those changes result when you run the code.

Last edited 2012


Guy Fawkes(Posted 2012) [#29]
U know what? I say SCREW RMXP.. the netplay is just WAY too hard to use.. ANYWAY...

I found this nice editor that suits my needs perfectly.. EXCEPT... If I wanted to delete just one layer at a time, how would I do that? :)



Here's the topic:



http://web.archive.org/web/20050828061826/http://www.blitzcoder.com/cgi-bin/articles/show_article.pl?f=helios06022004231413.html]http://web.archive.org/web/20050828061826/http://www.blitzcoder.com/cgi-bin/articles/show_article.pl?f=helios06022004231413.html



&



Here's the link to the zip file:



http://web.archive.org/web/20050828061826/http://www.blitzcoder.com/cgi-bin/articles/data/helios06022004231413/Article1.zip



Thanks! :)

Last edited 2012


Kryzon(Posted 2012) [#30]
That code only has two layers: graphic and collision.
If you want to delete one of these layers, clear every slot of the array that represents the layer you want to delete.

Look at the Fill() function in that code; it does exactly what's needed, except that it sets each slot in the array to '5'. Change that '5' to 'zero' and it's now clearing the entire layer - but the Fill() only does that to the map() array.

The array onto which you should apply this clearing depends on the current mode:
mode 1 -> map()
mode 2 -> mapCol()


Guy Fawkes(Posted 2012) [#31]
Thanks Kryzon... Ok, it's getting to the point where I need to scroll the map, 64 pixels (or 2 tiles) before my player reaches the edge of the map. How would I do this?


Here's the code:


hud.bb:






ScanCodes.bb:






game.bb:






Here's the media + demo:



http://www.mediafire.com/?aet4cqmowxve355



Thanks! :)

Last edited 2012


Guy Fawkes(Posted 2012) [#32]
Better yet, how do I make this scroll everytime my player touches the edge of the screen by the speed of the player?







Alls I ask is that someone create a 32x48 sized oval, and allow the PLAYER to move with the keys. then when the player touches the edge of the screen, it SMOOTHLY scrolls with the speed of the player, so it appears as an entire map.


Thank you :)


Kryzon(Posted 2012) [#33]
Seriously?

I'm not solving your problems for you. I solved your previous question by reading the code in that page until I understood it - something you never give yourself time for.
You'll keep making these pizza orders until you do.


Guy Fawkes(Posted 2012) [#34]
Then don't. Is this how u treat ALL the members? No WONDER this site is so abandoned...


Ross C(Posted 2012) [#35]
Again, do you not notice the trend? Kryzon is an EXTREMELY helpful guy on these boards. Why burn your bridges and risk him not helping you again?

If you can't do something like scrolling the screen of a tilemap, you don't understand the code. Your putting together a jigsaw puzzle with a blindfold on. You have to understand what the code currently does.

Firstly, do you know how to scroll the screen? If you do, then you need to detect when your player is touching the edge of the screen.

If you know your players centre point, and it's height/width, then you know when it's touching the screen. You simply check each edge of the screen, adding or deducting HALF the width/height of the player, depending on the edge. If any of these edges is detected as touching the edge of any part of the screen, then scroll the map in that direction.

Your asking someone to create a 32 x 48 oval. You can do that very easily with the OVAL command. I'm assuming you know how to make a player move about when the arrow keys are pressed? If you don't, then these are the basics we spoke of earlier. Without learning them, you'll always be just piecing code together without knowing whats happening.