Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Updating a 2.5D game to graphics 2
Started by rakoonic2 Sep 08 2013 02:39 PM

34 replies to this topic
[TOPIC CONTROLS]
Page 1 of 2 1 2
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

I'm gonna sorta keep an update here today while I attempt to update my game as quickly as possible.
I have a demo ready and waiting to go for updating.

 

Note this is pre graphics 2, IE what I'm starting with).

Not sure why, just think it might be interesting to see the pitfalls that I encounter and to see how quickly I can do it.

 

I should elaborate on what I need to achieve first:

 

1) Make sure it actually works! No idea what may have broken. Luckily this isn't a complete project, just the core game engine test, so hopefully very few non-game related bugs will appear.

2) Ideally it will look the same (ok, better) as it does now, but using quads instead of my current method of splitting each track section into a ton of slivers that I set the width on.

 

That's it really!

 

So, from here on in, will be actual updates as I get to grips with it.



[TOPIC: post.html]
#2

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Oh that's nice, it embedded the vid!

 

Corona is installed happily alongside my other versions, and I head over to the alpha docs. I was not impressed ;)

So will have to download the fishies demo to see how to actually distort these wee images.

 

At least my original code actually runs in the new corona. Granted it looks like rubbish and there is distortion all over the shop, but it runs! I am guessing the distortion comes from removing the registration points, so my first task will be to factor this in and get it looking and running how it did before.



[TOPIC: post.html]
#3

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Immediately got caught out by the simulator only running properly on the first monitor - heart attack avoided!



[TOPIC: post.html]
#4

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Button locations fixed (x, y being middle now instead of left and top - not sure how I feel about this change yet. Well, I always hated top and left as the parameter names, but making them be in the center... guess I'll get used to it).
Realised that if I don't accelerate, I can move left and right without graphics going wrong. So yeah, the changing of image properties is what is making them go hay-wire.
Also - background colour was yellow not green. Fix = divide the RGB components by 255 to put them into 0-1 range. Easy!



[TOPIC: post.html]
#5

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Hmmm sprites are going a bit wrong. I am wondering if setting their width and height is not working properly...



[TOPIC: post.html]
#6

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

OK given up on that since I believe I've encountered abug - so, direct to the quad things then, must look at the demo now!



[TOPIC: post.html]
#7

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Stab in the dark - the object path value - here we go. In fact to check I have the rotation correct, I'm simply going to replace my width and height settings (which seem to go wrong) with the path stuff, should help me understand the ordering and rotation (fingers crossed top left and clockwise, as that's what I'll set up for first).



[TOPIC: post.html]
#8

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Ok I have the ground sorta working (road and scenery is disabled for now). Values are a bit weird though - am thinking this is because of the offset stuff again, treating 0, 0 as the center...



[TOPIC: post.html]
#9

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

A few tweaks and I have my bars scrolling along properly, hurrah! Encouring, now for the road sections...



[TOPIC: post.html]
#10

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Bit confused though - I can specify the Y values of the path in absolute screen coords, but the X ones not, they are relative. Hope this is just me doing something wrong:

                        -- Long hand!
                        sprite.path.x1 = 0
                        sprite.path.x2 = screenWidth
                        sprite.path.x3 = 0
                        sprite.path.x4 = -screenWidth
                        
                        sprite.path.y1 = oldScreenY
                        sprite.path.y2 = oldScreenY
                        sprite.path.y3 = screenY
                        sprite.path.y4 = screenY


[TOPIC: post.html]
#11

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

I am beginning to suspect that a sprite's X and Y values are recalculated after setting the path, to maintain it in the center. Time to track down that offset help methinks, hopefully there is a way to disable it because the simplest means of controlling the shape is to dump the sprite at X,Y = 0,0 and then just set the path corners in screen coordinates.



[TOPIC: post.html]
#12

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Looks like I got my ordering wrong. Seems like x1, y1 is top left but it goes counter-clockwise. Probably my memory at fault here, I did think OGL ordering was clockwise but clearly not!



[TOPIC: post.html]
#13

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Oh dear me I think I have twigged it. The path values are offsets from the normal size of the image used.

My terrain lines are images as wide as the screen, but 1 pixel high. I couldn't work out why if I set all the X values to 0, it was filling the screen still. OK... they are relative. I am err... not sure why they've done that but I can work with it now I know.

 

NOW onto the track sections.



[TOPIC: post.html]
#14

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

I should point out that if I place two distorted rectangles touching along an edge (IE sharing 2 corners) - no matter what I do to distort the pair together, the joined edge never shows gaps - this is awesome (thanks OGL!) and prevents sparklies, something I had to factor in before with my other hacked method.



[TOPIC: post.html]
#15

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Track sections in as rectangles, about to make them quads and viola, lovely track!

Making the path relative to the size of the image though is really striking me as odd.

The path is essentially a list of offsets, rather than definitive coordinates.

This means every time I want to draw an image and distort it, I need to know the width and height of the source image, which is rather frustrating:

                            sprite.path.x1 = left
                            sprite.path.x2 = left
                            sprite.path.x3 = right - size.width
                            sprite.path.x4 = right - size.width
 
                            sprite.path.y1 = oldScreenY
                            sprite.path.y2 = screenY - size.height
                            sprite.path.y3 = screenY - size.height
                            sprite.path.y4 = oldScreenY


[TOPIC: post.html]
#16

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

And we can haz road! Looking extremely nice and fluid!



[TOPIC: post.html]
#17

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

I have noticed a bug with the sprites - if I turn on the road tilting (for when you go around corners) the track disappears - I imagine this is down to some sort of culling issue with rotated quads. Not a killer for now though, I just disable it.



[TOPIC: post.html]
#18

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

An addition to the previous message - they only vanish if the images are rotated more than a slight amount clockwise - anticlockwise they don't vanish.



[TOPIC: post.html]
#19

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Scenery is in but goes rather majorly wrong when you start to move down the road. I am wondering them going off screen affects things, or if having the sprite drawn above left of its registra... sorry - anchor, causes problems.

Will try offsetting by a couple of 1000 pixels now to see if that helps at all.



[TOPIC: post.html]
#20

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Nothing gets drawn when I try offsetting, so now I'm going to try moving the sprite's X and Y to the top left and make everything relative to that - just in case it helps.



[TOPIC: post.html]
#21

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

OK so, I have scenery in and (mostly) working.

What helped most was moving the sprites' X and Y to where I was setting the x1 and y1 values before (so leaving them at 0, 0) and making the remaining 3 points relative to that. More code, but it works!

 

 

Culling appears to be an issue though, as things vanish if they get too big, or if they go offscreen too much. This also leads to problems that I didn't have before (not all the closest track sections are drawn now), but it solved others (far less culling when not needed, and things don't vanish when you rotate in a certain direction).



[TOPIC: post.html]
#22

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Built and tested on ipad.

 

I was a bit optimistic - I set the draw distance to 300 meters (it was previously at 60!) and it ran at 60fps most of the time on the ipad 2, but not always. That was me being silly, I wouldn't necessarily up the draw distance anyway, even 60 meters shows you plenty ahead (it feels further), and I need some CPU for AI etc ;)

 

If corona gives me permission, I'll testflight out the build to interested people. Not going to bother sticking up a video simply because the video at the top is close enough to what it looks like now, and framerate isn't going to improve in the video as my comp is the limit!

 

@Corona guys - if you want to see the bugs, let me know, I can testflight you in or even send you the source code.



[TOPIC: post.html]
#23

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

So, conclusions:

1) There are still some bugs. Big wow on that one. Given this was marked as an alpha, I can't say it has frustrated me with the bugs, there are fewer than I'd expect given the big undertaking that is graphics 2 :)

2) It *works*. No show-stopping bugs. To be honest the only problem is the culling, and that is all - if it wasn't for that the demo would be running identically to what I had before (albeit a great deal quicker!).

3) The implementation of the paths for me leaves a lot to be desired. Having path be a series of offsets doesn't strike me as useful. I think it would be better to have it contain the actual image corners, which you can then modify directly. Needing to know the width and height of the image to position corners is absolutely horrible. This above all else is what I'd change as a design decision, as it is going to cause a lot of headaches in the future for people.

4) Positioning the X and Y to the top left corner is also a pain, but I only had to do this because of culling bugs (and even then I only managed to minimise it). Hopefully this wouldn't be necessary at the end, so I'm not going to lose any sleep over this.

The end result of this is instead of being able to do this, for example:
sprite.path.x1 = x1
							sprite.path.x2 = x2
							sprite.path.x3 = x3
							sprite.path.x4 = x4
							sprite.path.y1 = y1
							sprite.path.y2 = y2
							sprite.path.y3 = y3
							sprite.path.y4 = y4

I have to do something like this:
							local size = sizes[ imageName ]
							local width = size.width
							local height = size.height
							sprite.x = x1
							sprite.y = y1
							sprite.path.x1 = 0
							sprite.path.x2 = x2 - x1
							sprite.path.x3 = x3 - x1 - width
							sprite.path.x4 = x4 - x1 - width
							sprite.path.y1 = 0
							sprite.path.y2 = y2 - y1 -height
							sprite.path.y3 = y3 - y1 - height
							sprite.path.y4 = y4 - y1

Cleary more code slowing stuff down, and a probable major hindrance for any generic 3D engine.

5) I notice some jerkiness in the movement of the sprites when up close - am going to play a bit more later on to see if I am math.floor()-ing where I shouldn't, or something else. Also going to disable the pixelated draw modes - just anything I can see that might cause pixels to misbehave.

[TOPIC: post.html]
#24

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

OK I removed math.floor() and what-not and I am sure that the juddering is a bug with either graphics 2 or OGL, which means I'm naturally leaning towards G2 as I doubt OGL would have come this far with such a bug. Again, corona guys - if you are interested I can send the code and add you in testflight to see the actual problem - it is gonna be impossible to show it in a video.



[TOPIC: post.html]
#25

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

I should point out (as I just noticed) that in the simulator I don't see the jerkiness, only on the device.




[topic_controls]
Page 1 of 2 1 2
 
[/topic_controls]