A little parallax side scrolling test

Community Forums/Monkey2 Talk/A little parallax side scrolling test

Leo Santos(Posted 2016) [#1]
I haven't converted most of my Monkey1 code, so this means I don't have my Entity/Component framework yet. But I wanted to rewrite the whole thing anyway, this time breaking it into more independent modules (as in: modules that only import Mojo). Once I have those, I'll rewrite the entity-style main module, with components that use these modules.

Meanwhile I've made this little test just for fun (and learning!). You can fetch it from here:
https://github.com/DoctorWhoof/GridShooter



Some notes:
- Doesn't do much yet, just flying around and shooting.
- Coordinates are centered at the camera. I.e. If the resolution is 640x480 and the camera is at 0,0, upper left corner is -320,-240, lower right corner is 320,240.
- All texture filtering is off. Go full screen for Maximum Pixelness!
- There's a basic sprite class that can load sprite sheets, define animation clips ( series of frames to be played in order ) and change playback framerate.
- The Background class figures out which "tiles" are visible (based on the parallax corrected camera rect) and only draws those, respecting camera translation and parallax. Eventually this will become a Tilemap engine.
- The parallax is provided by Mojo's Canvas.Translate().
- I don't like that Mojo's Rect class doesn't have handles, so I made an Area class that is basically a rect with a movable handle, just like an Image object. The camera is an Area with centered handles.

Comments about the code are welcome!
Cheers!


therevills(Posted 2016) [#2]
Very nice!

If I resize the window too much the main playfield goes pink/purple?


Richard Betson(Posted 2016) [#3]
Neat. Adding MinSize=New Vec2i( 340,200 ) in New() will stop it from showing CLS color when resized to small. Not sure why it does that.


Leo Santos(Posted 2016) [#4]
Weird, on OSX I only see the pink/purple colors for a frame, then it refreshes correctly and stays correct.
I'll give it a try when I get home, are you guys seeing this issue on Windows?


marksibly(Posted 2016) [#5]
Nice!

The magenta texture issue is a bit interesting. The problem is that TextureFlags.DefaultFlags is not actually a valid mask, so you can't just &= stuff off it, eg:

_flags = TextureFlags.DefaultFlags
If Not filterTextures Then _flags &=~ TextureFlags.Filter

TextureFlags.DefaultFlags is actually it's own flag so shouldn't be combined with other flags. It's interpreted differently depending on whether you create a texture with a pixmap or with width,height. This should fix it:

_flags=Null 'assumes no mipmapping required.
If filterTextures Then _flags|=TextureFlags.Filter.

Not sure why the pink thing is only happening now and then though, will keep investigating...

But I might ditch TextureFlags.DefaultFlags altogether for this reason. I can just specify the 'real' default flags directly in Image.Load etc.

I actually have Canvas.TextureFilteringEnabled going now too, which makes me think do we actually need all this flags crap (for filtering at least)? Instead, we could just have a single Canvas.TextureFilter property...


Leo Santos(Posted 2016) [#6]
But I might ditch TextureFlags.DefaultFlags altogether for this reason. I can just specify the 'real' default flags directly in Image.Load etc.

Sounds good, thanks for looking into it, Mark!


marksibly(Posted 2016) [#7]
Is it OK to add your demo to bananas?


Leo Santos(Posted 2016) [#8]
Sure! No problem, but I'm still working on it. I was planning on adding enemies and, you know, some actual gameplay soon.
I'll keep it up to date on Github.


Richard Betson(Posted 2016) [#9]
Is it OK to add your demo to bananas?

This demo is a good coding example. For example I had no clue I could extend RenderWindow. :)


Leo Santos(Posted 2016) [#10]
For example I had no clue I could extend RenderWindow. :)

RenderWindow itself is a subclass of Window! You may want to extend that one if you want to control things more carefully.

Also, some of the things I did there aren't exactly how I'd do them "for real", i.e.: I'd make the player and bullets subclasses of some sort of an Entity or Actor class, instead of keeping track of the player's x and y coordinates in the RenderWindow class... but I wanted to keep it short.


Richard Betson(Posted 2016) [#11]
You may want to extend that one if you want to control things more carefully.

True. But it looks convenient to do it that way for some tasks. I like discovering whats possible. :P


Jesse(Posted 2016) [#12]
Hi people,

Sorry if this has been solved or explained before but I was trying to run the demo and got a few errors. I haven't been programming for a while so I am quite behind on whats going on.
I tried to look around the site to see if I could figure it out but no luck. This is the error I get when I try to run the code:

"/Users/legend/monkey2/bin/mx2cc_macos" makeapp -target=Emscripten -config=Debug "/Users/legend/monkey2/GridShooter/gridshooter.monkey2"
MX2CC V0.009

***** Building app '/Users/legend/monkey2/GridShooter/gridshooter.monkey2' *****

Parsing...
Semanting...
/Users/legend/monkey2/GridShooter/gamegraphics/src/background.monkey2 [9] : Error : Type 'mojo.graphics.TextureFlags' has no member named 'DefaultFlags'
/Users/legend/monkey2/GridShooter/gamegraphics/src/background.monkey2 [10] : Error : Identifier 'flags' not found
/Users/legend/monkey2/GridShooter/gamegraphics/src/background.monkey2 [12] : Error : Identifier 'flags' not found
/Users/legend/monkey2/GridShooter/gamegraphics/src/background.monkey2 [13] : Error : Identifier 'atlasTextture' not found
/Users/legend/monkey2/GridShooter/gamegraphics/src/background.monkey2 [14] : Error : Identifier 'atlasTextture' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [39] : Error : Type 'mojo.graphics.TextureFlags' has no member named 'DefaultFlags'
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [40] : Error : Identifier 'flags' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [42] : Error : Identifier 'flags' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [43] : Error : Identifier 'atlasTextture' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [45] : Error : Identifier 'atlasTextture' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [48] : Error : Identifier 'atlasImg' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [58] : Error : Identifier 'atlasImg' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [66] : Error : Identifier 'atlasImg' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [74] : Error : Identifier 'columns' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [75] : Error : Identifier 'columns' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [76] : Error : Identifier 'atlasImg' not found
/Users/legend/monkey2/GridShooter/gamegraphics/gamegraphics.monkey2 [80] : Error : Identifier 'atlasImg' not found
/Users/legend/monkey2/GridShooter/renderwindow/renderwindow.monkey2 [123] : Error : Type 'mojo.graphics.TextureFlags' has no member named 'DefaultFlags'
Done.


I tried the monkey2 example that comes with Monkey2 and they work but can't figure this one out.
By the way I am using the latest version from github.


Leo Santos(Posted 2016) [#13]
Try downloading the latest GridShooter demo from Github, that one is updated for Monkey2 V009.
Mark removed "TextureFlags.DefaultFlags" in the latest release, which is why you're getting that error, but I've updated the code for the demo last night.

Cheers!


Jesse(Posted 2016) [#14]
Thank you! Got it running. nice!