User Tag List

Results 1 to 6 of 6

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

  1. #1
    No Products Registered

    Join Date
    May 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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: gist.github.com/fa51e2d1eef4faeba0d7
    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

  2. #2
    Clicker Fusion 2.5 DeveloperFusion 2.5 DeveloperAndroid Export ModuleiOS Export ModuleXNA Export Module
    DistantJ's Avatar
    Join Date
    Jan 2008
    Location
    Gloucester, UK
    Posts
    2,143
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    Clicker Fusion 2.5 DeveloperFusion 2.5 DeveloperAndroid Export ModuleiOS Export ModuleXNA Export Module
    DistantJ's Avatar
    Join Date
    Jan 2008
    Location
    Gloucester, UK
    Posts
    2,143
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Twitch, whenever I try this, I get "No overload for method 'Draw' takes 3 arguments' and it won't build...

  4. #4
    No Products Registered

    Join Date
    May 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Clicker Fusion 2.5 DeveloperFusion 2.5 DeveloperAndroid Export ModuleiOS Export ModuleXNA Export Module
    DistantJ's Avatar
    Join Date
    Jan 2008
    Location
    Gloucester, UK
    Posts
    2,143
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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#?

  6. #6
    Clicker Multimedia Fusion 2Android Export ModuleiOS Export ModuleXNA Export Module
    nathansmit's Avatar
    Join Date
    Jan 2013
    Location
    NYC
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

Similar Threads

  1. Guide to faster games with less memory usage
    By Anders in forum iOS Export Module Version 2.0
    Replies: 30
    Last Post: 5th April 2015, 09:25 PM
  2. Article - Beginners Guide to Making Pixel Shaders
    By MuddyMole in forum Shader Development
    Replies: 3
    Last Post: 6th November 2014, 02:10 PM
  3. Guide to faster games with less memory usage
    By Anders in forum iOS Export Module Version 2.0
    Replies: 104
    Last Post: 6th December 2013, 07:23 PM
  4. How to Export Games to OUYA - Complete Guide.
    By Sparckman in forum Android Export Module Version 2.0
    Replies: 0
    Last Post: 3rd October 2013, 03:42 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •