Retro games: scaling all sprites or rather the entire canvas? - c++

I’ve tried my best searching online and reading the documentation to find a good answer, but I have yet to find one.
I’m creating a multi-platform 2d side-scrolling retro game in Cocos2d-x v3. The engine is rather new to me, but I do have decent experience in C++, Xcode and game development.
The game which I’m trying to create is utilising super minimal pixel art and I’m at a loss as to decide which approach would be best. Currently I have two ideas:
Work with a fixed resolution (e.a. 240x120, I’m working with
really(!) small sprites) and use Design Resolution to scale the entire canvas
upwards to the screen size using kResolutionNoBorder.
Pros: I don’t have to scale my sprites and I can just use a short piece of code in the Init() function.
Cons: Not sure if you can use Design Resolution to scale pixel perfect?
Scale every sprite so that it appears to be running on a ±240x120
resolution.
Pros: ?
Cons: I have to scale every sprite which means more code and less clarity as to what is really happening on my canvas.
I read the multi-resolution-support page on the Cocos2d-x wiki, but it didn’t really give me advice on what would be the best approach for retro games.
I feel that I don’t have enough knowledge about Cocos2d-x to make the right decision yet, and a voice in my head says I’m forgetting something important.

There are more factors at play. How do want the game to look that are diffrent from 240*120.
I'll suggest scaling the screen for pixel art games. You can also control aliasing/anti aliasing param for all texture. Generally for pixel game, anti aliasing is turned off.
KResolutionNoBorder might crop your game edges to fit it in. There are other options,like kResolutuonFixedHeight, kResoltuionFitAll, depending to game requirement and HUD placement.

Well, it still can look pixel perfect in large screen, cocos2dx uses float for the size and position, so even if 1 pixel in your design view is represented as 5x5 pixels on the screen, when you move the position 0.2 point it will look like it moves 1 pixel. How precise it can be depends on the device screen resolution.
I would go for scaling the canvas

Related

OpenGL 2D agents animation and scenario refresh

I'm trying to do a little game in 2D to learn how to do it and improve my programming skills. I programme the game using C++/C and OpenGL 3.0 with GLUT.
I so confused with some important concepts about animations and scenario refresh.
It's a good practice load all the textures only when the level begins ?
I choose a fps rate to 40 fps, should i redraw all the scenario and the agents in every frame or only the modifications ?
In an agent animation should i redraw all the entire agent or only the parts which changes from the past ?
If some part of the scene changes (one wall or something similar is destroyed) should i need to redraw all the entire scene or only the part which changes ?
Now my "game" works with a framerate of 40fps but the game has a flickering effect that looks really weird.
Yes, creating and deleting textures/buffers every frame is a huge waste.
It's almost always cheaper to just redraw the entire scene. GPUs are built to do this, it's very fast.
Reading the framebuffer from VRAM back to regular RAM and calculating the difference is going to be much slower, especially since OpenGL doesn't keep track of your "objects", it just takes a triangle at a time, rasterizes it, then forgets about it.
Depends on how you define the animation. If you're talking about sprite-like animation, where each frame is a separate image, then it's cheapest to just refer to the new texture and redraw.
If you've got a texture atlas, update the texture coordinates and redraw, and if you're using shaders (you pretty much have to if you want to be OpenGL 3.0), you might be able to get away with a uniform that offsets texture coordinates.
Yeah, as I said before, the hardware is built to clear the screen and redraw everything.
And for a framerate, you should be using the monitor's refresh rate to avoid vertical tearing. Pretty much all monitors now are 60Hz, so 60fps is the most common "target" framerate.
Choose either 30 or 60 fps as most modern monitors refresh in 60 Hz rate. So you have either 2 or 1 rendered frame per "monitor frame". This should reduce flickering effects. (I'm not 100% sure if you mean this with "flash effect".)
Regarding all other questions (which sound pretty much the same): In OpenGL rendering, redrawing everything is pretty common, as in most games almost the entire screen changes in every frame, for example if you're moving around. You could do a partial screen update, but it's very uncommon and more expensive on the CPU side, as you have to compute which parts to draw instead of just "draw everything".
Yes
2-4. Yes - Hopefully this help you understand why you must...
Imagine you have 2 pieces of paper. The first paper you draw a stick man standing still, and show that to somebody.
The second paper while the user is looking at that paper you draw the same thing again but this time you move the arm a little bit.
Now you show them the second paper, as they look at the second paper you clear the first paper and draw the man moving his arm a little bit more.
This is pretty much how it works and is the reason you must always render the whole image regardless if nothing has changed.

Tilemap 2D realistic fluid physics

I'm interested in trying to create realistic fluids (water), for a 2D game. This game is similar to Terraria. I have heard about how you can slap a bunch of colliding particles on the scene and render over it and voila, realistic acting water.
Terraria uses tile based water, which I am not a fan of.. I want something more advanced.
I thought about using bullet 3D physics (box2d has limits I would hit). For non colliding particle effects, I am thinking about using something like SPARK, since I think that'd give me the best of both worlds.
The issue I am thinking about, is that each block is 16x16, so on a 1600x900 scene, there are about 5 thousand tiles.
So I need to tell the physics engine that these tiles are collidable. Of course, there are void tiles that are considered to be non collidable.
Does anyone have ideas on this? Language is C++, I doubt that's relevant though.
EDIT: i think i'm going to have to cave in and use grid based water. I suppose, in retrospect particle based just makes everything more difficult but for what gain?
Your question is about tiled fluids, but you seem to actually be asking about a particle based approach.
If that's the case, what you're looking for is "Smoothed Particle Hydrodynamics", or SPH, which is a very popular technique for 2D and 3D fluid simulations in realtime situations.
Yes, it's basically just a particle system, with each particle responding to the forces in your environment (gravity, collisions etc.) in a reasonable (mathematically stable) way, combined with a constraint that they must stay a certain distance apart in order that the fluid is incompressible.
You can render the particles as points, if you have enough of them, or you can use them as a source for deriving a surface (for example using marching-cubes, though in 2D I wouldn't worry about that).
http://en.wikipedia.org/wiki/Smoothed-particle_hydrodynamics
It has the advantage of being relatively easy to code, and indeed to accelerate on a GPU.
Indeed I think they're probably a better approach than trying some kind of tile-based approach, and you get some more interesting results, such as spray kicking up, waves kicking against the edges of objects, etc. It's not too hard to get something pleasing working, I'd give it a go.

How to scale to resolution in SDL?

I'm writing a 2D platformer game using SDL with C++. However I have encountered a huge issue involving scaling to resolution. I want the the game to look nice in full HD so all the images for the game have been created so that the natural resolution of the game is 1920x1080. However I want the game to scale down to the correct resolution if someone is using a smaller resolution, or to scale larger if someone is using a larger resolution.
The problem is I haven't been able to find an efficient way to do this.I started by using the SDL_gfx library to pre-scale all images but this doesn't work as it creates a lot of off-by-one errors, where one pixel was being lost. And since my animations are contained in one image when the animation would play the animation would slightly move up or down each frame.
Then after some looking round I have tried using opengl to handle the scaling. Currently my program draws all the images to a SDL_Surface that is 1920x1080. It then converts this surface to a opengl texture, scales this texture to the screen resolution, then draws the texture. This works fine visually but the problem is that its not efficient at all. Currently I am getting a max fps of 18 :(
So my question is does anyone know of an efficient way to scale the SDL display to the screen resolution?
It's inefficient because OpenGL was not designed to work that way. Main performance problems with current design:
First problem: You're software rasterizing with SDL. Sorry, but no matter what you do with this configuration, that will be a bottleneck. At a resolution of 1920x1080, you have 2,073,600 pixels to color. Assuming it takes you 10 clock cycles to shade each 4-channel pixel, on a 2GHz processor you're running a maximum of 96.4 fps. That doesn't sound bad, except you probably can't shade pixels that fast, and you still haven't done AI, user input, game mechanics, sound, physics, and everything else, and you're probably drawing over some pixels at least once anyway. SDL_gfx may be quick, but for large resolutions, the CPU is just fundamentally overtasked.
Second problem: Each frame, you're copying data across the graphics bus to the GPU. This is the slowest thing you can possibly do graphics-wise. Image data is probably the worst of that, because there's typically so much of it. Basically, each frame you're telling the GPU to copy two million some pixels from RAM to VRAM. According to Wikipedia, you can expect, for 2,073,600 pixels at 4 bytes each, no more than 258.9 fps, which again doesn't sound bad until you remember everything else you need to do.
My recommendation: switch your application completely to OpenGL. This removes the need to render to a texture and copy to the screen--just render directly to the screen! Also, scaling is handled automatically by your view matrix (glOrtho/gluOrtho2D for 2D), so you don't have to care about the scaling issue at all--your viewport will just show everything at the same scale. This is the ideal solution to your problem.
Now, it comes with the one major drawback that you have to recode everything with OpenGL draw commands (which is work, but not too hard, especially in the long run). Short of that, you can try the following ideas to improve speed:
PBOs. Pixel buffer objects can be used to address problem two by making texture loading/copying asynchronous.
Multithread your rendering. Most CPUs have at least two cores and on newer chips two register states can be saved for a single core (Hyperthreading). You're essentially duplicating how the GPU solves the rendering problem (have a lot of threads going). I'm not sure how thread safe SDL_gfx is, but I bet that something could be worked out, especially if you're only working on different parts of the image at the same time.
Make sure you pay attention to what place your draw surface is in SDL. It should probably be SDL_SWSURFACE (because you're drawing on the CPU).
Remove VSync. This can improve performance, even if you're not running at 60Hz
Make sure you're drawing your original texture--DO NOT scale it up or down to a new one. Draw it at a different size, and let the rasterizer do the work!
Sporadically update: Only update half the image at a time. This will probably close to double your "framerate", and it's (usually) not noticeable.
Similarly, only update the changing parts of the image.
Hope this helps.

Stencil buffer VS primitive tesselation

I am learning opengl es and am planning to make a program which will have a shape which can be cut into a smaller shape by removing a part of the shape dynamicly. The constraint is I must be able to tell if an object is inside or outside the cut shape.
The option I thought of are:
1) use a stencil buffer made up of just a black and white mask. This way I can also use the same map for collision detection.
2) the other option is to dynamicly change my mind renderd primitive an then tesselating it. This sounds more complex and is currently my least favorite option. It would also make the collision detection more difficult.
PS
I would like the part of the shape removed to be fall of in animation, I am not sure how choosing any of these methods will affect the ease of doing so. Please express your opinion.
What are your thoughts on this?
Keep in mind that I am new to opengl an might be making mistakes without realizing it.
Thanks, Jason
It is generally considered a good idea to issue only write-commands to the graphics card. Basically that is "dont use glGet* commands at all", because the latency of those commands might be somewhat high.
That said option 1) is great if you just want to mask out stuff. As you are trying to make the cut part fall off this is really not an option, as you have to retrieve/reconstruct the vertices of that part.
I don't quite get the "tesselation" part of your second option, but if your primitive is a polygon and your cuts are straight lines, it is easy to calculate the 2 polygons after the cut. In fact the viewport clipping routine in OpenGL does that all the time and there is a lot of literatur, for example http://en.wikipedia.org/wiki/Sutherland-Hodgman
In the long term it is often way better to first build a (non-visual) model of what is going on in the application before visualizing.

Simple 3D graphics project? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm looking for some good ideas for a simple 3d graphics program as my final project for an intro to computer graphics class. As for some background information, we'll be using opengl and will have a little over a month to work on it, so nothing too far-fetched. The simpler and "prettier" looking, the better. It does, however, require some sort of interface that the user can interact with (so a very simple game or similar is a good idea) and must be 3D.
My only idea so far is maybe a 3D version of Tetris (google for some examples).
Edit: I ended up going with 3D Tetris. For a less than a month's worth of time, you can see what I came up with here.
A 3D text/code editor. Text is 3D, errors stand out, code indentations not only indent, but protrude on z axis, pages/files are 3D and can be flipped like a ringpad.
Probably not useful, but fun and more interesting than a game IMO.
In university, for my parallel programming course, I did an openGL/MPI implementation of Conway's Game of Life. It was quite interesting. Wish I still had the code around somewhere. The advantage of using open GL is that you can lay out the grid in different orientations rather than a flat grid. Remember, code doesn't exist until it's checked into source control.
Putting some physics in makes it more interesting. How about implementing Labyrinth (the maze toy where you are supposed to guide a ball from the starting point to the goal by tilting it).
EDIT: Erik told me it's called Labyrinth.
A 3D minesweeper game similar to this one.
Rubik's cube.
Look at http://www.contextfreeart.org/ ... write something similar, but for 3d.
If you've ever played Missile Command I belive that this could be a good project to '3d-ify'.
Try a chicken crossing the road game.
You will probably need to demonstrate the bare minimum of:
textures
lighting
animation
interaction
collision detection
Do not include even simple physics if there are no marks for it. Prioritise tasks based on the marking scheme. Get something simple working first and back it up :)
Honestly it's actually pretty easy to load up a bunch of animated models and set up a simple first person shooter. I mean, to get a generic thing working you don't need all that much:
Either load and display a heightmap or a BSP tree as the level.
Load and render some simple MD2 models (keyframe animation, low amount of polys and simple format).
Draw a simple hud.
Ray/AABB intersection, every time the user clicks you'll need to cast a ray from the center of the screen and see if it intersects an the bounding boxes of the enemies.
Simple FPS camera system.
The above is pretty doable in a month for as far as I'm concerned. (It's probably doable in a week if you already know some of the stuff).
I tried to do a 3D Asteroids for a class once. I never completed the gameplay part, since it was a graphics class. The ship could move around, as could the asteroids, but there was no collision detection. The ship and the asteroids had 3D textures applied to them, and the asteroids were built out of ellipsoids, so they were actually 3D. The gameplay was all 2D, though.
How about one of those games that are a wooden maze with a ball rolling around the top. You tilt the board and try to get the ball round the maze without falling down the hole? It has the advantage that it's relatively simple to get started, but you could probably think of some extensions if you have time.
If you're looking for a true university size task, mine was to produce a small helicopter "game" where you could take off from an aircraft carrier in an ocean and fly around with some environmental effects, moving water etc. i.e. nothing too complicated. As another example, the task set for the year previous to mine was a little sans-opponent racing game.
I would worry that you may loose marks with tetris as it sounds like little would be done on the z-axis and may come across a little too 2d though it obviously depends on your brief.
Anyway, these will give you the chance to experiment with the basic OpenGL features such as fog, lighting, geometry, textures and some basic movement physics & collision detection/response.
Further on this, though often beyond the scope of such a university sized task you could then take this further add nicities such as animated geometry (e.g. people), environment mapping, reflections, shadows, particle systems, shaders, perhaps a heightmapped island.
Rewrite Blocks 3D. The graphics on this project look horrible now. I remember playing this game (or one like it) on a 386 with wireframe graphics... awesome. The game is basically 3D tetris.
I would check Panda3D or Pygame.
Panda3D is probably close to what you are looking for, and one idea that always works is to put the user's face in the main character or object. 3d-pong with the player's face? Use something unexpected... like a tetris made of burgers instead of bricks.
I love little self-organising alife applications like boids. They can be fun to code and always benefit from a nice UI, especially 3D ones. User input can modify aspects of the environment as well as moving around/through the environment.
I like exoplanets. Go read up on them. On Wikipedia and http://exoplanet.eu there's a lot of information. Astronomers and public outreach people could always use fresh 3D animations showing how the Doppler effect works, or how the planet transiting in front of the star makes it for example 0.5% dimmer.
Or, what I work on, is how when the planet passes behind its star. At Earth we receive just a teeny bit less infrared from that star. The user could adjust the orbit, size of planet, etc. and see how that affects what astronomers see. It could be fun, simple enough to do, and unlimited potential in extending the work for nicer textures, slick lighting effects, etc., and you could end up with something to contribute to science education.
I'd be making such 3D animations myself, if I weren't busy helping crunch numbers for the actual science. I'll be jealous!