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.

Newcomers AppGameKit Corner / Backdrop sprite repeating

Author
Message
Khadin
9
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 3rd Apr 2015 19:19
Still having problems with this.

ScreenW = 1366
ScreenH - 768

I'm wanting a backdrop image, to repeat once i come to the end of it. I've tried quite a few things, but nothing seems to work,



This sets the backdrop the screen just after screenW (I have a menu on the first screen, that jumps to this screen when you hit begin game)

Now i've tried all the 'if' commands, but nothing seems to work.

Another problem i'm having is, i have a plane - and a smoke sprite. I want the smoke sprite to follow the plane. I've tried setting the smoke sprite to the getspritex, getspritey of the plane, but i'm obviously doing it wrong, and it just sits there, admittedly, at the planes X and Y, but it's static.

Khadin
Behdadsoft
15
Years of Service
User Offline
Joined: 7th Apr 2009
Location: Tehran-Iran
Posted: 3rd Apr 2015 21:11
this code for Repeat Backdrop:




for follow smoke sprite to Plane use this code:

Khadin
9
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 3rd Apr 2015 22:54
Thanks Behdadsoft, i'll attempt to digest it

Khadin
Behdadsoft
15
Years of Service
User Offline
Joined: 7th Apr 2009
Location: Tehran-Iran
Posted: 3rd Apr 2015 23:16
Your welcome.
Khadin
9
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 4th Apr 2015 23:28 Edited at: 4th Apr 2015 23:30
Hey again Behdadsoft

Is there a simplier way of doing that at all? Reason being is rather than just copy the code, i want to understand it

Thanks.

EDIT: Repeating the backdrop. I don't see why a simple getspriteX > than screenwidth, reset sprite position statement wouldn't work. Do i have to use arrays? (Still new to Arrays, can't say i'm getting anywhere them. if you know of a tutorial that would be great.

Khadin
xCept
21
Years of Service
User Offline
Joined: 15th Dec 2002
Location:
Posted: 5th Apr 2015 00:18 Edited at: 5th Apr 2015 00:19
Hi. You can create a smooth scrolling backdrop effect with just a single texture by altering its UV offset, thus saving on resources, required code and complexity.

To start, you must set the image's U wrapping mode to REPEAT. So in your example, after loading image 100 call this command:



The 100 corresponds to the image ID of the background texture, while the 1 tells it to repeat the texture horizontally if wrapped.

Then define a variable to track the current offset value. Also define one to indicate the scroll speed, such as:



Finally, in your main loop or wherever you wish to handle the scrolling, add to the default bgOffset each frame and then update the actual sprite offset as follows:



Note that UV offsets go from 0.0 (LEFT) to 1.0 (RIGHT), so you will want to use a very small number for the bgSpeed as it increased by that each frame. You can go extremely low like 0.00001 for the speed for very slow scrolling, or dynamically adjust this value based on player speed etc. with some math.

Also, especially when developing for mobile platforms you should always use images that are powers of two (i.e., 512x512, 256x256, 512x256, etc.) or else strange things may occur. You can still scale the sprite itself to any aspect ratio and dimensions as long as the underlying image is a power of two (on desktop you can use any size image and it is OK). Future versions of AppGameKit will likely address this setback now that the power of two issue is not as significant as it once was on mobile devices.

Attached is the full example I explained including media.

Attachments

Login to view attachments
Dead Pixel
9
Years of Service
User Offline
Joined: 27th Nov 2014
Location:
Posted: 5th Apr 2015 02:52
I'm not sure if what I'm going to suggest is a practical solution at all, but thought I might as well mention it:

A while back I was experimenting with code for an endlessly scrolling background and what I did was create a cylinder, apply an image to it and, set up my camera etc, and then in the do.....loop rotate the cylinder.

You could actually make the level seem larger by swapping the image at a certain point in the rotation. As long as the left and right edges of all images are the same, like seamless tiling, then I think this could work.

//******************************
// Coding In BASIC using AppGameKit V2
//******************************
Khadin
9
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 5th Apr 2015 18:54
Hi again.

Ok, it scrolls, but as it does, the image smudges itself. Any reason for that?

Khadin
Khadin
9
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 5th Apr 2015 19:05 Edited at: 5th Apr 2015 19:42
xCept!!!! That works! Thank you, it's just what i needed. You explained it perfectly, i was able to follow it, and understand it! lol Thanks for all those that helped.

Dead Pixel: Unsure how i'd even create a cylinder But i've got this page saved, so when i understand more, i'll also give your way ago.

EDIT What's better would you say?

Option 1

Have the plane sitting on the screen, and landsape, enemies, to be generated as they come onto the screen, (Unsure how i'd do this) or how i use to have it,

Option2

x# = x# +3
setviewoffset(sW + x#, 0)

to have the screen scroll, and for the enemies, landscape and the like, to already be in place? (This seems easier)

Now if going with option 2 how would i keep the background, that's repeating to keep up with the screen scrolling? I've tried a few ways, but what happens is the backgroup image, although scrolling, can't keep up with the screen scroll, so eventually i'm left with no back ground. Unsure what i need to edit.

Khadin
Yaro
10
Years of Service
User Offline
Joined: 29th Mar 2014
Location:
Posted: 6th Apr 2015 11:12
What if you want to have a tiled image? So you could have a single sprite that contains a (for example) 2x2 grid of the image. I tried setspriteuvscale and setimagewrapu/v, but it just provided one smaller instance of the image. Is there an easy way to tile an image in a single sprite? Not sure if I should post this in a thread of its own, but it seems relevant.

And Khadin, try using FixSpriteToScreen( iSpriteIndex, mode ) with mode = 1 to snap the sprite to your view.
Khadin
9
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 6th Apr 2015 13:36
Ah yes, fixspritetoscreen, how did i forget about that! Can't check it today, but thanks Yaro, hopefully that'll work.

Khadin
Khadin
9
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 10th Apr 2015 20:05 Edited at: 10th Apr 2015 20:23
Oki, that didn't work sadly. My code:



function loadScene() // Screen scrolls (WrapU) but keeps falling off page
SetViewOffset(sW+sW,0)

// Load Background Image
bgImg = LoadImage("level.png")
// Set U wrap mode to repeat
SetImageWrapU(bgImg, 1)

// Create background sprite
bgSpr = CreateSprite(bgImg)
SetSpriteSize(bgSpr, sW, sH)
// Sprite's position
SetSpritePosition(bgSpr,sW + sW,0)
FixSpriteToScreen(bgSpr,0) // o =world sprite, 1= screen sprite


endfunction
[\code]

The level backdrop scrolls, but as it's doing so, it's slowly moving to the left, until it's now off screen, and i'm left with a blank background. I know it has something to do with my control function:

[\code]
function userControls()

//Screen Scrolls, and player can fly either up, or down.

do

x# = x# +3
setviewoffset(sW + sW + x#, 0) // screen actually moves

yAxis = yAxis + GetDirectionY() * speed
xAxis = xAxis + GetDirectionX() * speed
setspritex(1,screentoworldx(200 + xAxis))
setspritey(1,ScreenToWorldY(500 + yAxis))

// Increase background offset by speed set previously
bgOffset = bgOffset + bgSpeed

// Update the UV offset of the sprite
SetSpriteUVOffset(bgSpr, bgOffset, 0.0)


// wall commands not working right
if getspritex(1) + getspritewidth(1) > ScreenToWorldX(sW)
rightWall = ScreenToWorldX(sW) - getspritewidth(1)
setspritex(1, rightWall)
endif

sync()

loop
endfunction


Also having problems with my plane sprite getting it to stop going past the right wall. The sprite stops, but something's still moving. Hold for 4 seconds, takes 4 seconds for the sprite to respond to the left movement etc. But this is not my main concern at the moment.

Khadin

Login to post a reply

Server time is: 2024-11-21 16:24:22
Your offset time is: 2024-11-21 16:24:22