How do I approach coding a scrolling screen?

[MrPlow]

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

[Ian Price]

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.

[fuzzy70]

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 

Lee

[Ian Price]

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...

[fuzzy70]

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 

Lee

[ampos]

Using Ian's example, with a screen 60 tiles wide, 8x8 pixels

Code (glbasic) Select Expand

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

[Ian Price]

Using Ian's example, with a screen 60 tiles wide, 8x8 pixels

Code (glbasic) Select Expand

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

[MrPlow]

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?

[MrTAToad]

Might also be worth looking at JNR Example #3

[fuzzy70]

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/. It's small & free & has a few example tiles & maps so you can get a rough idea about whats involved.

Lee

[spicypixel]

This is a pretty simple but effective tile editor SimpleTileMapEditor

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

Code (glbasic) Select Expand


// .----------------------------------------------------------------------.
// |                                                                      |
// | 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

[MrPlow]

Excellent!!

Love the editors and the code usage!
Hmmm New Toys!!!!

[Darmakwolf]

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]

[mentalthink]

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...

[erico]

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!