I have created a game that is 800*600. How can i make it so that it will fit all computer screens? How would this normally be done? Other sites have said too set everything to a certain ratio depending what the screen resolution is. But if each image in the game changes size in comparison to the screen resolution it would mean that the images would not be in the right places and cause other problems. Is it possible to just "Stretch out" my 800*600 game so it fits any size? Thanks
You need to make the game resolution-independent. That means you create your own concept of 'game units' (which might be exactly the same as pixels relative to an 800x600 screen if you want), and then operate exclusively on those game units.
Whenever you draw something to screen you convert co-ordinates and sizes from game units into pixels. You will need to have functions that can convert both ways, because you may also want to translate click-events from screen space to game space.
When you start your game, you need to decide on the screen resolution and aspect ratio. If the aspect ratio is not the same (eg widescreen), you might choose to either stretch the game area or letterbox it. By moving all the translation code to a lower level and operating only within your game units, you save yourself a lot of pain in the long run.
Yes, you can stretch it out. Make the Games' main components on a JPanel that is 800 by 600, and add that JPanel to your JFrame. Then the player can resize your JFrame and the components won't go offscreen, they will change shape and size based on the new size of the JFrame. Remember that the mouse's position in relation to the JFrame will change a bit, but divide the mouses position by the JFrames height/width and multiply it by the JPanel height/width to get the position in relation to the JPanel. With this method you can let the user maximize your game and still have components look normal.
Related
In short, I'm making a simulation where I have a bunch of creatures that can see each other. The way I want to do this is to capture an area around each creature and give it to their neural network, and make them evolve to recognize their surroundings. I am coding this using LibGDX, and I don't plan on making screenshots every single frame because I can imagine that that is already a very poor idea. However, the problem is that I don't know how to get the pixels inside a defined square without capturing the entire screen and then cherry picking what I want for each creature, which will cause a MASSIVE lag spike, since the area these creatures will be in is 2000x2000, and therefore 12 million different values (4 million RGB values).
Each creature is about 5 pixels (width and height), so my idea is to give them a 16x16 area around them, which is why iterating through the entire frame buffer won't work, it would pointlessly iterate through millions of values before finding the ones I asked for.
I would also need to be able to take pictures outside of the screen (as in, the part outside the window's boundaries), if that is even possible.
How can I achieve this? I'm aiming for performance, but I do not mind distributing the load between multiple frames or even multithreading.
The problem is you can't query pixels in a framebuffer.
You can capture a texture from a framebuffer, and you can convert a texture to a pixmap.
libgdx TextureRegion to Pixmap
You can then getPixel(int x, int y) against the pixmap.
However, maybe going the other way would be better.
Start with a pixmap, work with the pixmap, and for each frame convert the pixmap to a texture and render that texture fullscreen. This also removes the need for the creatures environment to match the screen resolution (although you could still set it up like that).
however, i have a weird issue, when drawing, it seems the outside 1px of an image is stretched to fit a rectangle, but the inside is only stetched to an extend, i was drawing to 48x48 tiles, but drew a 500x500 tile to show the issue. [ 500x500 draws fine ]
the worst part seems to be, it chooses when to stretch and not to stretch. and also what to strech. im sorry this is hard to explain but i have attached a image that i hope does a better job.
it could just be misunderstanding how to use a draw with spritebatch
edit: Tile is 48x48 not 64x64, ive just been working all day.
This is because you are not rendering "pixel perfect" which means your image does not line up with the pixel grid of your monitor. A quick fix might be to set a linear filter for your textures, since by default it uses nearest and thus a pixel on the screen will inherit the closest color it can get. A linear filter will interpolate colors and make that line "look" thinner.
texture.setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear);
If you are using texturepacker you can do this in one go by altering it's settings.
texturePackerSetting.filterMin = Texture.TextureFilter.Linear;
texturePackerSetting.filterMag = Texture.TextureFilter.Linear;
Or you could edit the atlas file itself by by changing the filter parameter to:
filter: Linear,Linear
This obviously costs more power since it needs to do more calculations for each pixel you drawn to the screen but I would not worry about this until your drawing is starting to get a bottleneck.
Another solutions is to draw pixel perfect which means you need to set your viewport to the size of the device gdx.graphics.getWidth, gdx.graphics.getHeight, in other words a ScreenViewport and draw your textures at exact sizes you want them. Of course this means a screen with more pixels sees more of your game world then a screen with less pixels and the more pixels a device has the smaller your textures will look. Another drawback of this is that you have to forget about any zooming or draw sprites for each level of zoom so they line up with the pixel grid of the device again.
I've made an Asteroids game and am having trouble with different screen sizes. Yes, I know about viewports but in my case I don't think that can work. I've tried to use it but my objects are not images. Instead they're rendered by a ShapeRenderer and therefore the viewports probably not affect them I guess. I've solved how to fit the text for most types of smartphone screens but not the rendered objects like the player and asteroids. On some screens they're perfect size and other screens either too small or too big.
Is there a way to scale rendered (ShapeRenderer) types in libGDX so that they will fit the screen size / resolution? Or must I try to implement a class for common resolutions that can be used?
Here is two pictures that illustrates the problem. The text in the images are aldready fixed by the way.
EDIT:
It does work to create and apply the viewport for the ShapeRenderer now, but I'm still having the same problem. The game objects inside the viewport aren't scaled to fit the current screen. I need a way to scale down the game objects s using a viewport (if possible). The way the game is going to be implemented is that the size of the smartphone screen is the game world size. Therefore, there are little space to move the ship if the screen is pretty small. I want the objects to be moving around in an area that fits the viewport size. The game should not get more difficult or easier depending on the screen size.
Example on left: The game on a large smartphone screen
Example on right: The ShapeRenderer viewport is working
Viewports were created in order to reduce the effort needed to render on different sized screens. So are ideal for situations like this.
In order to use a Viewport with a ShapeRenerer you simply need to set the ShapeRenderer's projection matrix to the one in the viewport's camera.
shapeRenderer.setProjectionMatrix(veiwport.getCamera().combined);
This means the shapeRenderer will render the way the viewport is configured.
I am currently working on a LibGDX mobile game app. The problem I am having is that I want the world width and height to be 480x480 and the screen width and height to be 640x480. The extra 240 units on the screen would be used for rendering UI, kind of like in ROTMG or Clash Royale(The cards view while in game).
I have thought about rendering the UI over the game with another camera, but it is not the design style I am going for. I want the game's logic and coordinates to be within the world's width and height and not take in the extra space for UI.
How would I do this?
P.S. the game is 2d
P.P.S. I would like for the game to keep this config on resize.
Denfeet, create a fullscreen Stage with 2 Group instances - one of them for UI, the other for the game. Groups: Game's bounds are 0, 0, 480, 480. UI's bounds are 480, 0, 240, 480. Now if you want to work in coordinates relative to the game Group for example, call Group.localToStageCoordinates(Vector2 localCoords) on the game Group (or make yourself a helper method so you don't have to keep writing this long name). Also the UI and game logic can stay completely separated this way - magic :-).
I always like to separate my game from UI. You can just create a camera full screen and put your UI over it with a Scene2D stage. Unless you want the exact dimensions you don't have to worry to much about positioning since you just overlay your UI elements. If you want to use a stage for your game as well then just create a 2nd stage, one for the game and one for the UI.
Anyway, looks like you are thinking in pixels. Your game does not need to know about pixels, just how much to render of your game world. If I would have a tile that is 10 x 10 units large and I want to show a square of 10x10 tiles to the player I would create a new FitViewport(100, 100) for it. The Viewport calculates world units back to pixels on the device it is running. This makes things more logical for you or anyone who works on your program. My player is not 256 pixels high because that is how hight the image is, no my player is 1,80m high and uses a image to display. If he wants to jump like a ninja he should jump over another player say 2m and he falls at 9.8m/s.
I have been developing a game for Android and I had an idea for catering for the different screen sizes, and I would like feedback on whether the idea is a good one, and how it can be improved, or if it shall be scrapped.
What I have is a 2d size scrolling game, where it is locked it landscape mode. Because screen sizes vary, the width of the screen (usually height, but it is in landscape so I shall refer to it as width) changes. This causes all sorts of problems for me with moving the background because it is basically two identical pictures scrolling, and as one leaves the screen the other begins to replace it, so I must catch the image when it has just left the screen, so it can be reset and ready to scroll again. This means it must reach an int value every time, else it will not be caught and both images would scroll off screen.
My idea, which I have briefly tested is as follows. Truncate the screen size to the nearest 100px. Add 100 to this value and have that as the width for the background images. Then divide this value by 100 and use this as the rate of px per frame it moves. This would mean that the background would move at a similar rate dependent upon screen size (set frame rate of 25FPS). It would move faster on larger screens and slower of smaller screens, but would move at the same speed relative (1% per second or whatever).
Is this idea flawed? I have tested it vaguely on a few screen sizes but the emulator is verry laggy, and I only have a couple of devices to test it on (I am only 18 so I cannot get my hands on many!).
Any feedback appreciated.