A quick 'n dirty guide for anyone making low-resolution pixellated games

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.
  • Okay, so, if you're like me, you like games with low-res sprites, you might be wondering how to get 'em to show up nice and crisp on your phone (or xbox - I haven't done it, but same method will work)

    There might in fact be some option to achieve this within MMF, but I couldn't find it, and I can almost guarentee that using a native method will be faster.


    First of all, scaling the screen. I'm using a resolution of 160x240 - because it scales nicely on iPhone and WinPhone: exactly half the regular iPhone's resolution ( a quarter of the Retina's ), and a third of WP7's resolution (as long as you allow for a 40px gap at the bottom of the window), and provides large, satisfyingly retro looking pixels.

    How to get the XNA project to scale the screen? Easy!
    Open up the project in Visual Studio, and then find and open \Application\CRunApp.cs in the Solution Explorer (probably on the right)
    navigate to around like 830, and replace the draw(){...} method, with the code here: Please login to see this link.
    This will cause the MMF engine to draw it's screen to a RenderTarget, which we can then use to stretch and scale (and tint and rotate...) as much as we like.
    If you're really pro, you could even have a MMF game running on a screen somewhere inside a full-blown 3D XNA game - but I'll leave that for you to figure out :P

    Once the MMF screen is rendered to our RenderTarget, we can then draw it to the main screen at whatever size and position we like. Simple, right?


    Only problem now is, by default, Texture Filtering is set on. While it's totally sensible to use for high-res games, it makes all our nice crisp pixels come out looking like a blurry mess; not cool at all!
    Thankfully, it's also simple to change - this time in \Sprites\SpriteBatchEffect.cs
    Around line 40 onwards, first occuring in the public void Begin(){...} method, you'll see a line that looks like this:
    batch.Begin( SpriteSortMode.Immediate, BlendState.AlphaBlend ); ( your one may look a little different - the important bit is batch.Begin( )

    Here, the spritebatch isn't told to explicitly use any filtering - so it just goes ahead and uses the default option, which is blurrymode. It's simple to change, just put this in it's place:
    batch.Begin( SpriteSortMode.Immediate, BlendState.AlphaBlend, SamplerState.PointClamp, DepthStencilState.Default, RasterizerState.CullNone );

    and if you're using Additive blending, further down you'll see a similar line (just under case CSpriteGen.BOP_ADD):
    batch.Begin( SpriteSortMode.Immediate, BlendState.Additive, SamplerState.PointClamp, DepthStencilState.Default, RasterizerState.CullNone );

    note that the only difference is BlendState.Additive - I'm pretty sure you can figure out what this means!
    The only important thing to add on is really the SamplerState.PointClamp bit - that's what makes our textures nice and pixelly - but the other two (, DepthStencilState.Default, RasterizerState.CullNone) need to come along for the ride.

    You'll want to do the same thing to the default: case a little bit further down - and any other cases you encounter where you use the blend modes - or else you'll get blurry textures on objects using those blend modes.


    Anyways, hope this helps a few of you! It was pretty straightforward for me to figure out, because C# and XNA are almost like a second language now, so I figured I'd write a messy little guide :)


    PS you should totally go check out our game at jollycorpse.com :D

    Edited once, last by Twitch (June 5, 2012 at 2:24 PM).

  • I use 240x160 when making retro games too, as you say it's exactly half the iPhone 3GS' resolution, but it's also the exact resolution of the Game Boy Advance.

    Thank you for this topic! I will definitely put this to use and check out your game :)

  • Are you using Visual Studio 2010, with XNA 4.0?
    If so, you can use IntelliSense to find out what's going on - type in "spriteBatch." and pause on the period, after a few seconds you should be presented with a list of the supported methods.

    One of these OUGHT to be texture, rectangle, color since that is one of the defaults methods, but there will be others which you could use to pass in some default parameters.
    If you can take a screenshot of the code editor I'd be able to help you out more :)


    Also, I can't believe you're only just trying this now after almost a year :P

  • Heya, I'll take a look. I did go and read the method definition in Visual Studio 2010, it appears to take about 6 arguments instead of 3 (perhaps since the update?). I know a good bit of C++ and Objecive-C but I never learned any C# so bits of it are a little alien to me. How would I pass a default parameter in C#?

  • Is this the best way to do retro games for Xbox 360? When it's set to 1280x720 it takes care of displaying to 1080p all the way down to regular TV without any effort on my part, I poked around but never found a way to make MMF snoop the user's display on the Xbox 360.

    My first game The Chickening is available on XBLIG. B-gawk.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!