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 / Fitting backdrop to screen, Screen scrolling and sprite depth

Author
Message
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 6th Mar 2015 18:43 Edited at: 7th Mar 2015 01:58
Hi all. A few questions, that i'm struggling with.

Getting a background sprite, to fit to screen. Now i've tried; fixspritetoscreen and that didn't do anything, so i'm at a loss.

Screen scrolling, so that the background sprite repeats itself as you scroll across the screen onto another.

Thanks in advance,

Thanks

Khadin
BatVink
Moderator
16
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 7th Mar 2015 12:11
Quote: "Getting a background sprite, to fit to screen. Now i've tried; fixspritetoscreen and that didn't do anything, so i'm at a loss."


Fix Sprite makes sure the sprite stays in the same position when you scroll the world coordinates. It's for scores, health etc and other HUD items.

Set your virtual resolution (SetVirtualResolution) and then create an image of the same size.

Quote: "Screen scrolling, so that the background sprite repeats itself as you scroll across the screen onto another."


You can do this one of 2 ways...

1. Use SetViewOffset() to scroll the world. You'll need larger-than-screen background images, or tile multiple images (better option).

2. Scroll the UV coordinates of the background image as you move. SetSpriteUVOffset()

Quidquid latine dictum sit, altum sonatur
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 7th Mar 2015 13:32
Thanks BatVink. I now understand what you're saying about the FixSpriteToScreen and SetVirtualResolution. Little unsure still about the scrolling, but i'll have a play with it later today, as i've not yet used that command at all.

Thanks again for the reply, it's helped a lot.

Khadin
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 7th Mar 2015 20:46
This is what i've worked out. Now, i'm new, and this is probably really bad coding, but i'm just happy i got it to sort of do what i wanted it to by staring at the screen, and messing with commands for 3hours lol.

My screen width is 1300, and the sprite i'm moving is an airship. So i used the command:

if getspritex(airship) => (getviewoffsetx() + 1299)
setviewoffset(1310,0)
endif

Now as the airship hits the right hand side of the wall, the screen jumps to the next screen As i say, probably the worse way to code it, but made me happy lol. Now, i need to spend another 3 hours, getting it to jump back a screen, as of now, it just disappears Love AppGameKit, but it really does take a while to get it down, for me anyway

Thanks all.

Khadin
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 7th Mar 2015 21:10
Update. Using the command:

if getspritex(airship) < getviewoffsetx()
setviewoffset(0,0)
endif

I can now jump back a screen. Can't say i know exactly why it works, but it does

If someone could explain it in detail for me, that would be great. I now will try to center in on the airship, and the screen move around that, rather than the sprite moving.

Khadin
BatVink
Moderator
16
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 8th Mar 2015 14:55
Take a look at this. It's vertical scrolling, but the same principles.

Quidquid latine dictum sit, altum sonatur
Conjured Entertainment
AGK Developer
14
Years of Service
User Offline
Joined: 12th Sep 2005
Location: Nirvana
Posted: 8th Mar 2015 20:53 Edited at: 8th Mar 2015 23:55
Quote: "Set your virtual resolution (SetVirtualResolution) and then create an image of the same size."

That is what I do, with a few extras.

I make the background 3x the screen width for side scrolling.
That way when it reaches the end I can reset it without the user ever realizing it, because the last third of the background is an exact copy of the first third.
The middle section is different of course, but blends seamlessly to either ends, so you essentially end up with with a scrolling background twice the screen size.

Then, I do this for clouds, mountains, and other sections as layers so I can scroll them at a different speeds.
That way the things off in the distance are moving across the screen slower than the things in the foreground.

I have a hot air balloon level that my piglet can fly infinitely in either side direction, but his height is limited to Earth's atmosphere. (you can see the stars though)
The last time I tried to film my game play FRAPs was acting choppy, but I will try to show you what I am talking about.

Edit
Here is a low res (very low res, so keep it smaller) video of a couple of levels that I use scrolling in for Angry Piglets v2... (see attached)
The levels seem bland right now because I am still adding stuff to them, but they show you an infinite scroll using basic background images as described.

These use the method I describe above which is really easy to do by incrementing or decrementing the X position of the sprites.
Note in the balloon level that the birds flying in the same direction move slower than the ones going in the opposite direction.
The speed change is subtle, but you can notice it when I change directions as it seems more realistic for the effect.

So, in short, if input is given for the movement of the piglet, then it affects the piglets animation and the position of everything else based on their base speed (if any) plus the adjustment.

Quote: "You can do this one of 2 ways...

1. Use SetViewOffset() to scroll the world. You'll need larger-than-screen background images, or tile multiple images (better option).

2. Scroll the UV coordinates of the background image as you move. SetSpriteUVOffset()"

I have probably been doing it wrong then, because i just use a setsrpiteposition() for the background and cloud sprites just like all the other sprites.
Once it reaches the end position (either way), then it loops by resetting the position of the image, either to the first third, or third third, depending on the direction it is traveling.

if you want to do a scrolling then transition to another scrolling after awhile, then you can do the same thing by adding a non-looping 3x background in the middle...

A - B - A (looping scroll)

A - C - D (non-looping scroll for transition)

D - E - D (looping scroll)

Whereas A is the first screen background using the scroll method I am describing.
B is the middle third, leading back to A to make the first looping scroll.
We loop once the 3x background image has moved 2/3 of its total width AKA twice screen width, because the third third is then in place.

You can increment/decrement a counter for the number of scrolls if you want to allow the user to back track, and keep the transition in place.

Once you reach the end, where the second A is in place, then you switch (seamlessly) to the transition's A and scroll the transition once to D.
Once D is on place you switch again to the last background image, that has D for it's start screen, and loops back when reaching its own end.


I hope this makes sense.
That is how I do it.


Coding things my way since 1981 -- Currently using AppGameKit V2 Tier 1

Attachments

Login to view attachments
Conjured Entertainment
AGK Developer
14
Years of Service
User Offline
Joined: 12th Sep 2005
Location: Nirvana
Posted: 10th Mar 2015 22:39 Edited at: 11th Mar 2015 15:43
Here is the stuff you need for the piglet to fly that balloon... (see attached)

1 Chunk of


2 Background images to Scroll at separate speeds (background + clouds)

3 Images to use as frames for the piglets sprite (left + center + right)


Coding things my way since 1981 -- Currently using AppGameKit V2 Tier 1

Attachments

Login to view attachments
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 11th Mar 2015 18:38
Thank you so much for that Conjured Entertainment It's nice to see the code, so i can play a round with it, and hopfully get the result i'm after.

I've been trying to get a cloud to scroll across the screen, which i can now do. I'm wanting it to reset itself (Loop back round) which is giving me issues at the moment.

Thanks again!

Khadin
Conjured Entertainment
AGK Developer
14
Years of Service
User Offline
Joined: 12th Sep 2005
Location: Nirvana
Posted: 12th Mar 2015 15:20 Edited at: 12th Mar 2015 15:34
Quote: "Thank you so much for that Conjured Entertainment It's nice to see the code, so i can play a round with it, and hopfully get the result i'm after."

No problem, but remember one thing... my way is not the best or right way, just one way of doing it.

This is probably not the best example since I have the vertical on a scroll too (limited scroll not infinite), but I figured you could take that part out easy enough if you wanted to.

I'm glad it helped, and have fun.

P.S.
Don't forget to check out all of the examples that come with AppGameKit!
There is working code for many types of game play for you to use.
There is a placement editor too that can be used for side scrollers!


Coding things my way since 1981 -- Currently using AppGameKit V2 Tier 1
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 12th Mar 2015 17:55
I had no idea about the placement editor! Will take a look at that for sure Thanks again.

Khadin
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 13th Mar 2015 16:23
Can't seem to find the placement editor. I bought it via stream, so the location that site's showing, it's not there. Search didn't find it either.

I'll keep looking and report back once i do find it.

Khadin
BatVink
Moderator
16
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 13th Mar 2015 16:25
Mine is here:

C:\Program Files (x86)\The Game Creators\AGK2\Tier 1\Utilities\Placement Editor\Editor

Quidquid latine dictum sit, altum sonatur
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 13th Mar 2015 16:28
Ok, i've found it. Location is:

C:\Program Files (x86)\Steam\steamapps\common\appgamekit2\tier1\utilites\placementeditor.

Khadin
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 13th Mar 2015 16:58
Thanks Batvink. Yep, i found it. I get how to use it, just can't seem to load it into agk2.

Khadin
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 13th Mar 2015 17:06
This is what the website's saying:

Viewing data in AGK

A Tier 1 AppGameKit project is avaiable within C:\Program Files\The Game Creators\AGK\IDE\Utilities\Placement Editor\Viewer.

Ensure you copy your saved data (export.txt) and any media into the media folder. Now open the project and you will be presented with this code:

----

I've copied the export.text and the media file, to a new AppGameKit project media folder; to the media folder within placement editor, and the placement viewer, but when i load AGk2 up, it can't find any file to open, in any of the three destinations. What am i missing?

Thanks.

Khadin
BatVink
Moderator
16
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 13th Mar 2015 17:34
I'm no expert as I've never used it, but I just had a play...

I put some media in the editor media folder and ran it., The media showed up OK and I could use the program.

Running the editor from Program Files crashed on save. I assumed this is because you cannot save to this folder, so I moved the editor out to My Documents. Now it works OK and saves OK.

I put the viewer folder in My Documents. I added the media folder and export.txt file as described. It did nothing. After reading the code I realised it was ignoring a serious error - file not found.

Put the export.txt in the viewer/media folder and it will work!

Quidquid latine dictum sit, altum sonatur
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 13th Mar 2015 18:15 Edited at: 13th Mar 2015 18:30
I can get the media to show up in the editor, but loading up the actual AGK2 program, i can't find it.

But whilst i've got you batvink;

Now i've read all the above, including the links about scrolling and i'm still lost.

I want a cloud, to scroll from left to right, ( I did this via the following code;

if getspritex(cloud) < getviewoffsetx() +2300
print(getspritex(cloud))
SetSpritePosition(cloud, x#,0)
x#= x# + 10
endif

Now, once it gets to the end of the screen (+2300) i want it to loop back, and continue from the start. I've TRIED everything. Remember i'm new, but this is wrecking my head. I've tried:


if getspritex(cloud) > screenwidth+300

setspritex(cloud, 0)
endif

Which then returns the cloud to the start.... But how do i get it going again?

Thanks

Edit I want the screen to stay still, and just the cloud to move, and once it exits the screen, to restart. Plan is to have a bunch of clouds moving at different speeds in the background.

Khadin
BatVink
Moderator
16
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 13th Mar 2015 19:33
Here you go, download the attached image and use with the following code.
If you've got any questions after looking at it, just post back here.

Set the number of clouds with constant cNUMCLOUDS.

I've created this to show how you would control the clouds in a separate function, so you can do a simple call each loop, then carry on with your main game code.



Quidquid latine dictum sit, altum sonatur

Attachments

Login to view attachments
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 13th Mar 2015 19:54 Edited at: 13th Mar 2015 21:07
That is exactly what i wanted to do! I know nothing about arrays, so i assume that's what i should attempt to tackle next lol. Your code looks really complicated, hopefully at some point i'll understand it Thanks again BatVink.

Another quick question. Is there any tutorials out there? I've gone through Alistars first 8 chapters ( Awaiting his book release) and i've gone through the guides, and attempted to play with the code, but i could do with a tutorial to follow.

I've never useds arrays, or "types" like you have in your above code.

Another edit Although learning AGK2 as a total beginner has been tough, i'm loving it, especially when you attempt something small (To me) like just getting a cloud to actually move from a set point, really gives you a sense of achievement lol. Then i see your code batVink i see how far i've got to go

Edit: Just bought the book; Teach yourself game programming for android and windows from the Amazon Kindle Store. It has a section on Type, which i now understand, and i'm now delving into the world of Arrays! So by the end of this weekend, i might understand that code Batvink ;P

Khadin
BatVink
Moderator
16
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 14th Mar 2015 11:46
You'll soon wonder how you managed without them

Here's an old tutorial of mine on Types, I'll upload the Arrays/Types one later.

It's a tutorial for DBPro, but all of the principles are identical. There are just small differences in syntax.

Quidquid latine dictum sit, altum sonatur
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 14th Mar 2015 13:41
Thanks BatVink. When i get home later i'll read through the tutorial.

Khadin
Khadin
5
Years of Service
User Offline
Joined: 13th Feb 2015
Location: Nottingham
Posted: 14th Mar 2015 17:53
I gave the tutorial a read, as well as from the book, and i reckon i have types down, but arrays seem quite complicated, and will take a while to sink in.

Khadin

Login to post a reply

Server time is: 2020-02-20 09:59:36
Your offset time is: 2020-02-20 09:59:36