GLBasic forum

Main forum => GLBasic - en => Topic started by: MrPlow on 2011-Nov-14

Title: How do I approach coding a scrolling screen?
Post by: MrPlow on 2011-Nov-14
Hi,

I will be looking to do this shortly and wondered if there was a simple enough approach to making a scrolling screen containing a lot of sprite objects.

I could have the screen reset and show a new screen when the main sprite hits the borders but I want a smooth scrolling screen if possible...

Would I have to iterate thru the sprite x,y coords and update to simulate a scrolling effect?
I think this method would be heavy on CPU and cause a bad flicker.

Any other ideas?

G
Title: Re: How do I approach coding a scrolling screen?
Post by: Ian Price on 2011-Nov-14
For the sprites (not the background) just add a scrollx and scrolly variable to their position.

EG DRAWANIM monster_sprites,frame, x+scrollx, y+scrolly

When the player moves and scrolls the screen, update the scrollx and scrolly variables. Shouldn't be too CPU intensive.

GLB doesn't draw what's not on-screen, so they shouldn't flicker or slow down the process too much.

For the screen itself, use a tiling system that only draws the level from the screen-position and not the whole level (ie only actually draw a small part of the level than can actually be seen on the screen). Say the whole level is 10000 tiles wide and 32 tiles high, don't use a for/next loop that draws all 10000 tiles along - only draw the full number of tiles that it takes to cover the visible screen - say 40. That way you are only drawing 40x32 sets of tiles, rather than 10000x32.  This method reduces CPU action significantly.

Does any of that make any sense? I've only just got up after working a night-shift, so still brain-dead.



Title: Re: How do I approach coding a scrolling screen?
Post by: fuzzy70 on 2011-Nov-14
Would you still need a buffer zone around the edge of the screen of 1 tile, for example if there is 20x20 tiles on screen you need 22x22 tiles (1 tile all around display area) for the buffer. I have not got around to doing scrolling in GLB yet but in all my previous tile engines with other languages a buffer zone was used.

By all around I meant if you was scrolling in all 4 directions, otherwise just 1 extra line of tiles in the direction you are scrolling.

Scrolling is next on my to-do list after I have finished playing/learning POLYVECTORS  :D

Lee
Title: Re: How do I approach coding a scrolling screen?
Post by: Ian Price on 2011-Nov-14
Yes, I use a buffer zone in my scrolling apps, but I was trying to keep things as clear and simple as possible in my answer...
Title: Re: How do I approach coding a scrolling screen?
Post by: fuzzy70 on 2011-Nov-14
Quote from: Ian Price on 2011-Nov-14
Yes, I use a buffer zone in my scrolling apps, but I was trying to keep things as clear and simple as possible in my answer...

Sorry, my bad  :noggin:

Lee
Title: Re: How do I approach coding a scrolling screen?
Post by: ampos on 2011-Nov-14
Using Ian's example, with a screen 60 tiles wide, 8x8 pixels

Code (glbasic) Select
dim backgrond_icon[10000][32]

for x=0 to 59
   for y=0 to 31
      drawsprite background_icon[x+xoffset][y],x*8+x_smooth,y*8
   next
next


x_smooth is from 0 to 7, when x_smooth=8, inc xoffset & x_smooth=0

More or less
Title: Re: How do I approach coding a scrolling screen?
Post by: Ian Price on 2011-Nov-14
Quote from: ampos on 2011-Nov-14
Using Ian's example, with a screen 60 tiles wide, 8x8 pixels

Code (glbasic) Select
dim backgrond_icon[10000][32]

for x=0 to 59
   for y=0 to 31
      drawsprite background_icon[x+xoffset][y],x*8+x_smooth,y*8
   next
next


x_smooth is from 0 to 7, when x_smooth=8, inc xoffset & x_smooth=0

More or less

Indeedy :)
Title: Re: How do I approach coding a scrolling screen?
Post by: MrPlow on 2011-Nov-15
Great stuff! Thanks guys...
Will have a go with this soon!

Are 8x8 or 16x16 tiles the most common?
What is best to suit both Android & iPhone? Or does it even matter?
Title: Re: How do I approach coding a scrolling screen?
Post by: MrTAToad on 2011-Nov-15
Might also be worth looking at JNR Example #3
Title: Re: How do I approach coding a scrolling screen?
Post by: fuzzy70 on 2011-Nov-15
Quote from: MrPlow on 2011-Nov-15
Are 8x8 or 16x16 tiles the most common?

8x8,16x16 & 32x32 are the common size tiles, the size you use is mainly down to target resolution & how much detail (and your drawing ability in my case lol).

For example if your game is designed for a pc at 1920x1080 using 8x8 tiles will require a lot of sprite plotting. I normally start with 32x32 tiles which seems to work well with me & sometimes drop to 16x16 if I need to.

Download a little program called Tiled at http://www.mapeditor.org/ (http://www.mapeditor.org/). It's small & free & has a few example tiles & maps so you can get a rough idea about whats involved.

Lee
Title: Re: How do I approach coding a scrolling screen?
Post by: spicypixel on 2011-Nov-15
This is a pretty simple but effective tile editor SimpleTileMapEditor (http://devlinslab.blogspot.com/search/label/Simple%20Tile%20Map%20Editor)

And this is what I use to read in the data format for the map (.smp) and block data (.bmd)

Code (glbasic) Select

// .----------------------------------------------------------------------.
// |                                                                      |
// | Load Simple Tile Map Editor (.SMP) File                              |
// |                                                                      |
// '----------------------------------------------------------------------'
FUNCTION GE_LoadSMP: filename$

LOCAL MapData%
LOCAL Descriptor$
LOCAL UseWord$

OPENFILE (1, "data/" + filename$, TRUE)

// Skip Map Description Bytes("STME1.0")
READSTR 1, Descriptor$, 7

// Is MapWidth & MapHeight Stored in BYTES or WORDS
READSTR 1, UseWord$, 1

// MapWidth & Height actual Values
IF UseWord$ = "B"
READUBYTE 1, MapWidth%
READUBYTE 1, MapHeight%
ELSE
READUWORD 1, MapWidth%
READUWORD 1, MapHeight%
ENDIF

// Grab the TileWidht and TileHeight Values
READUBYTE 1, TileWidth%
READUBYTE 1, TileHeight%

DIM TileMap%[MapWidth%][MapHeight%]

// Read the Tile Map Data
FOR y% = 0 TO (MapHeight%-1)
FOR x% = 0 TO (MapWidth%-1)
READUBYTE 1, TileMap%[x%][y%].GE_SpriteFrame%
NEXT
NEXT

CLOSEFILE 1

ENDFUNCTION



// .----------------------------------------------------------------------.
// |                                                                      |
// | Load Simple Tile Map Editor (.BMD) File                              |
// |                                                                      |
// '----------------------------------------------------------------------'
FUNCTION GE_LoadBMD: filename$

OPENFILE (1, "data/" + filename$, TRUE)

// Clear the Block Array
DIM BlockTileMap%[MapWidth%][MapHeight%]

// Read the Block Tile Map Data
FOR y% = 0 TO (MapHeight%-1)
FOR x% = 0 TO (MapWidth%-1)
READUBYTE 1, BlockTileMap%[x%][y%].GE_SpriteFrame%
NEXT
NEXT

CLOSEFILE 1

ENDFUNCTION


Hope my code example helps if you decide to use Devlins editor ;)
Title: Re: How do I approach coding a scrolling screen?
Post by: MrPlow on 2011-Nov-16
Excellent!!

Love the editors and the code usage!
Hmmm New Toys!!!! :whip:
Title: Re: How do I approach coding a scrolling screen?
Post by: Darmakwolf on 2011-Nov-16
This is my approach to smooth scrolling. This is my game I'm working on called The Legend of Blobo: Castle of Deceit. It works roughly like Symphony of the Night (PSX Castlevania.) Unzip everything and run the program.

Controls
Arrow keys = move / navigate menus
Z = cancel / attack
X = accept / jump
I = inventory
F1 = debug
F3 = display FPS
C = mega jump in debug mode

Let me know if it's the kind of system you're looking for. It is not tile based. It is object based. You can have infinity objects per map, and maps are infinite in size. This is possible at 60 FPS because the game only draws what's on-screen, including animated enemies. Objects can also have transparency and draw priority (e.g, in front of the main character.) Enemies react to objects on the map, such as falling until they hit a solid object or stopping and going another direction when hitting a wall. Objects can also move horizontally and vertically like moving platforms in Mario (this is experimental...) and there is HP and EXP and stats and equipment. It's a work in progress :3


<edit note: the attachment for me for some reason downloads as a .php file... renaming it to .zip allowed me to extract the archive. Maybe it's just a firefox / glb forums bug. lol >


[attachment deleted by admin]
Title: Re: How do I approach coding a scrolling screen?
Post by: mentalthink on 2011-Nov-16
Sorry for Keednaping the post, I nottice 2 times, when I donwload in this case the project of friend Darkmarkwolf and in Physics 2D engine, the file hast the name index.php...

The demo it´s very preftty, very cool Graphics...
Title: Re: How do I approach coding a scrolling screen?
Post by: erico on 2011-Nov-16
Strange, mentalthink, it downloads with the correct name here on the win 7 64b+chrome.
but I heard some people reporting this phenomena on other posts too...

...will check the game...

ps:. just did, you scrolling is soooo smooth it even causes a visual effect blur! nice work. I´m quite found on the standing animation on the player, like slowly dancing hehe. great!
Title: Re: How do I approach coding a scrolling screen?
Post by: Ian Price on 2011-Nov-16
Quote from: mentalthink on 2011-Nov-16
Sorry for Keednaping the post, I nottice 2 times, when I donwload in this case the project of friend Darkmarkwolf and in Physics 2D engine, the file hast the name index.php...

The demo it´s very preftty, very cool Graphics...


I got that (Index.php) too - I'm using Win7 64Bit and FireFox. Even right-clicking on the name and clicking "Save Link As" it states Index.php. however, you can rename it "Game.rar" and then extract it, it's fine.

Weird.

[EDIT] It's coming along nicely and is much smoother than the last time we saw it :)
Title: Re: How do I approach coding a scrolling screen?
Post by: MrPlow on 2011-Nov-16
Quote from: Darmakwolf on 2011-Nov-16
This is my approach to smooth scrolling. This is my game I'm working on called The Legend of Blobo: Castle of Deceit. It works roughly like Symphony of the Night (PSX Castlevania.) Unzip everything and run the program.

Controls
Arrow keys = move / navigate menus
Z = cancel / attack
X = accept / jump
I = inventory
F1 = debug
F3 = display FPS
C = mega jump in debug mode

Let me know if it's the kind of system you're looking for. It is not tile based. It is object based. You can have infinity objects per map, and maps are infinite in size. This is possible at 60 FPS because the game only draws what's on-screen, including animated enemies. Objects can also have transparency and draw priority (e.g, in front of the main character.) Enemies react to objects on the map, such as falling until they hit a solid object or stopping and going another direction when hitting a wall. Objects can also move horizontally and vertically like moving platforms in Mario (this is experimental...) and there is HP and EXP and stats and equipment. It's a work in progress :3


<edit note: the attachment for me for some reason downloads as a .php file... renaming it to .zip allowed me to extract the archive. Maybe it's just a firefox / glb forums bug. lol >

Very nice indeed!
I loved the debugging option F1
Plus the superjump made me dizzy...

Nice and smooth...

So how do you use objects rather than tiles??
Title: Re: How do I approach coding a scrolling screen?
Post by: Hatonastick on 2011-Nov-17
He would have made his own 'object' system.  Guessing using Types.  There is no built-in object system with GLB.
Title: Re: How do I approach coding a scrolling screen?
Post by: Zapp on 2011-Nov-17
I built a similar engine recently with 5 layers for the background
The layers were drawn in this order and with the exception of Layer 0 they were all 32 x32 tiled
Layer 0 static background (sky)
Layer 1 - distant mountains, scrolls 1 pixel every 8 the character moves.
Layer 2 - distant hills, scrolls 1 pixel every 4 the character moves.
Layer 3 - nearby background detail, moves 1 pixel every 2 the character moves
Layer 4 - background layer that moves 1 pixel for 1 pixel with the character
Layer 5 - Collision layer and ground layer that the player interacts with moves at same rate as character
Layer 6 - Was unused, but would move 2 pixels for every 1 the player moved, so you could have small shrubs and things in the very foreground.

Its a lot of drawcalls, but my computer and my iphone 3g handled it just fine.
Title: Re: How do I approach coding a scrolling screen?
Post by: Ian Price on 2011-Nov-17
I used 11 parallax layers for Shadow Of The Beast on the Wiz. Even on such a weedy machine FPS remained at between 55-60FPS.
Title: Re: How do I approach coding a scrolling screen?
Post by: erico on 2011-Nov-17
love the zeppelin... is he on an unique layer?
Title: Re: How do I approach coding a scrolling screen?
Post by: Ian Price on 2011-Nov-17
Quotelove the zeppelin... is he on an unique layer?
Technically no, as it's the only thing that moves independently of the scroll.
Title: Re: How do I approach coding a scrolling screen?
Post by: MrPlow on 2011-Nov-17
Brings me back to my Amiga days!! :nw:
Title: Re: How do I approach coding a scrolling screen?
Post by: fuzzy70 on 2011-Nov-18
Quote from: MrPlow on 2011-Nov-17
Brings me back to my Amiga days!! :nw:

I have never left them  :D :D