This might be a weird question but what is the right way to think about how images are projected onto the screen?
if we have an image already on the screen and we render another image onto the screen does the new image go ON TOP of the old one, thus making the old one not visible anymore. or does it go behind the old one thus making the new one not visible till we clear the screen off of the old one.
I used to think that the new image goes on top of the old one, however, after working with buffers for a little bit (ie BufferedImage and BufferedStrategy) I come to think that is not the right way it happens.
so can someone please clarify this matter
thanks
Generally speaking, you can think of it like a painters canvas. Every time you paint something new you are painting over the top of what is there.
When dealing with buffers, the process is the same, but know you are dealing with whatever was painted last to THAT buffer.
So if you have three buffers, [1] is on the screen, you are painting [2] which gets pushed to the screen, it doesn't have the content of [1], but what was ever painted to [2] when it was painted last...
So you have [1][2][3], then you have [2][3][1], then [3][1][2]. Each buffer will be out of date by at least two paint cycles.
This is why it's important to clear you buffers and rebuild them from scratch each time, as you don't know the last time a buffer was painted
It depends on what and how you are drawing.
The screen "refreshes" itself at a certain rate, (for example 60 times a second). At that point whatever the graphics card has in its memory gets drawn.
There are lots of different ways of putting things into that graphics card memory though and they have different behaviour.
BufferedImage does not directly go to the screen. Instead it's "copied" into the graphics card and that is used to draw to the screen.
Swing hides all that away from you though - you just need to worry about the repaint and it will handle the rest. The actual handling of this comes from the Control you are using, for example JButton, JPanel, etc.
Related
I looked a lot in the internet but somehow couldn't find any benefits to always clear the screen in the render method or didn't understand it very well.
So what's the benefit from clearing the screen wouldn't clearing somehow cause the game to draw everything from scratch each time the render method is called?
If you have a game with at least one moving thing, not clearing the screen will cause the sprite (if you're using a sprite) of the thing to be in every place it has been in past frames. Usually you clear the screen to remove past drawn stuff and redraw with updated positions. You could program some logic to know whether stuff has moved and avoid clearing the screen but I don't think clearing the screen's computational cost is high enough for the effort.
Below is an example of the effect caused by not clearing the screen each frame.
Edit: As Tenfour04 stated, there is another good reason for clearing the screen: Perfomance.
Libgdx, like almost all game engines, uses double buffering, which means that while one frame is being rendered to screen, it is already drawing the next frame to another frame buffer. If you don't clear the screen, it has to wait and then copy the contents of the first buffer into the second before it can start drawing to it. So it wastes GPU time copying and also prevents the multitasking that saves some time
For reference the effect I'm going for is this:
I'm working in Processing 3, NOT p5.js.
I've looked around processing forums, but i can't find anything that works in the current version or doesn't use PGraphics and a mask which from what I've read can be expensive to use.
My current ideas and implementations have resulted to drawing shapes around the player and filling the gaps in with a circles with no fill that has a large stroke weight.
Does anyone know of any methods to easily and inexpensively draw a black background over everything except a small circular area?
If this is the wrong place to ask this question just send me on my way I guess, but please be nice. Thank you:)
You could create an image (or PGraphics) that consists of mostly black, with a transparent circle in it. This is called image masking or alpha compositing. Doing a Google image search for "alpha composite" returns a bunch of the images I'm talking about.
Anyway, after you have the image, it's just a matter of drawing it on top of your scene wherever the player is. You might also use the PImage#mask() function. More info can be found in the reference.
I'm having quite a bit of difficulty wrapping my head around the actual display side of things with libgdx. That is, it just seems fairly jumbled in terms of what needs to be done in order to actually put something up onto the screen. I guess my confusion can sort of be separated into two parts:
What exactly needs to be done in terms of creating an image? There's
Texture, TextureRegion, TextureAtlas, Sprite, Batch, and probably a
few other art related assets that I'm missing. How do these all
relate and tie into each other? What's the "production chain" among
these I guess would be a way of putting it.
In terms of putting
whatever is created from the stuff above onto the monitor or
display, how do the different coordinate and sizing measures relate
and translate to and from each other? Say there's some image X that
I want to put on the screen. IT's got it's own set of dimensions and
coordinates, but then there's also a viewport size (is there a
viewport position?) and a camera position (is there a camera size?).
On top of all that, there's also the overall dispaly size that's
from Gdx.graphics. A few examples of things I might want to do could
be as follow:
X is my "global map" that is bigger than my screen
size. I want to be able to scroll/pan across it. What are the
coordinates/positions I should use when displaying it?
Y is bigger
than my screen size. I want to scale it down and have it always be
in the center of the screen/display. What scaling factor do I use
here, and which coordinates/positions?
Z is smaller than my screen
size. I want to stick it in the upper left corner of my screen and
have it "stick" to the global map I mentioned earlier. Which
positioning system do I use?
Sorry if that was a bunch of stuff... I guess the tl;dr of that second part is just which set of positions/coordinates, sizes, and scales am I supposed to do everything in terms of?
I know this might be a lot to ask at once, and I also know that most of this stuff can be found online, but after sifting through tutorial after tutorial, I can't seem to get a straight answer as to how these things all relate to each other. Any help would be appreciated.
Texture is essentially the raw image data.
TextureRegion allows you to grab smaller areas from a larger texture. For example, it is common practice to pack all of the images for your game/app into a single large texture (the LibGDX “TexturePacker” is a separate program that does this) and then use regions of the larger texture for your individual graphics. This is done because switching textures is a heavy and slow operation and you want to minimize this process.
When you pack your images into a single large image with the TexturePacker it creates a “.atlas” file which stores the names and locations of your individual images. TextureAtlas allows you to load the .atlas file and then extract your original images to use in your program.
Sprite adds position and color capabilities to the texture. Notice that the Texture API has no methods for setting/getting position or color. Sprites will be your characters and other objects that you can actually move around and position on the screen.
Batch/SpriteBatch is an efficient way of drawing multiple sprites to the screen. Instead of making drawing calls for each sprite one at a time the Batch does multiple drawing calls at once.
And hopefully I’m not adding to the confusion, but another I option I really like is using the “Actor” and “Stage” classes over the “Sprite” and “SpriteBatch” classes. Actor is similar to Sprite but adds additional functionality for moving/animating, via the act method. The Stage replaces the SpriteBatch as it uses its own internal SpriteBatch so you do not need to use the SpriteBatch explicitly.
There is also an entire set of UI components (table, button, textfield, slider, progress bar, etc) which are all based off of Actor and work with the Stage.
I can’t really help with question 2. I stick to UI-based apps, so I don’t know the best practices for working with large game worlds. But hopefully someone more knowledgeable in that area can help you with that.
This was to long to reply as a comment so I’m responding as another answer...
I think both Sprite/SpriteBatch and Actor/Stage are equally powerful as you can still animate and move with Sprite/SpriteBatch, but Actor/Stage is easier to work with. The stage has two methods called “act” and “draw” which allows the stage to update and draw every actor it contains very easily. You override the act method for each of your actors to specify what kind of action you want it to do. Look up a few different tutorials for Stage/Actor with sample code and it should become clear how to use it.
Also, I was slightly incorrect before that “Actor” is equivalent to Sprite, because Sprite includes a texture, but Actor by itself does not have any kind of graphical component. There is an extension of Actor called “Image” that includes a Drawable, so the Image class is actually the equivalent to Sprite. Actor is the base class that provides the methods for acting (or “updating”), but it doesn’t have to be graphical. I've used Actors for other purposes such as triggering audio sounds at specific times.
Atlas creates the large Texture containing all of your png files and then allows you to get regions from it for individual png's. So the pipeline for getting a specific png graphic would be Atlas > Region > Sprite/Image. Both Image and Sprite classes have constructors that take a region.
I got me 90 odd images that form an explosion animation. When I come to 'play' the animation, I use a Swing Timer to set a new Icon for a JLabel, and cycle through until I reach the last image.
My question is this: is it better to have loaded and stored all the ImageIcons in some static form somewhere, or load them from file every time I need them?
Explosions are quite common in the game, and I have two sizes of them (scaling each image for every size of explosion seemed rather inefficient when I want them to swap very quickly) which makes for 200 images (roundabout).
Store or load?
For a game, using Swing components to represent game objects (Sprites) is probably not the best way. I would use a single JPanel as the rendering component and override its paintComponent() method to do rendering for my own game objects.
This way you avoid dealing with Swing components intricacies (e.g. they may add unwanted gaps / offsets where they really paint, as well they make it harder to control the painting order - important when two objects overlap).
I wouldn't use any type of Icon, just use java.awt.Image, or you own type to represent an image (e.g. to render part of an underlying image - as sprite sheet requires). Icon doesn't really add any value for a game.
If the image data fits easily into memory, I would load all the images before even starting. If there are too many images to preload them all, I would use some sort of cache that retains as many images as possible - the cache may use an LRU based scheme to decide which images to retain when it gets full.
I use a SwingTimer to set a new Icon for a JLabel, and cycle through until I reach the last image.
You may want to consider using an Animated Icon. It can be used anywhere an Icon can be used.
The AnimatedIcon class uses loaded Icons, so I guess my answer would be to pre-load for ease of use and CPU efficiency.
This program will have an infinite canvas (ie as long as the user scrolls, it becomes bigger) with a tiled background image, and you can drag and drop blocks and draw arrows between blocks. Obviously I won't use a layout manager for placing blocks and lines, since they will be absolutely positioned (any link on this, possibily with a snapping feature?). The problem arises with blocks and lines. Basically I'll have two options:
Using a simple layout for each building block. This is the simplest and clearest approach, but does it scale well when you have hundreds of objects? This may not be uncommon, just imagine a database with 50 tables and dozens of relationships
Drawing everything with primitives (rectangles, bitmaps, etc). This seems too complicated (especially things like text padding and alignment) but may be more scalable if you have a large number of objects. Also there won't be any event handler
Please give me some hints based on your experience. I have never drawn with Java before - well I did something rather basic with PHP and on Android. Here is a simple preview
DISCLAIMER
You are not forced to answer this. I am looking for someone who did something like this before, what's the use of writing I can check an open source project? Do you know how difficult it is to understand someone else's code? I'm talking about implementations details here... Moreover, there is no guarantee that he's right. This project is just for study and will be funny, I don't want to sell it or anything and I don't need your authorization to start it.
Measuring and drawing text isn't such a pain, since java has built in classes for doing that. you may want to take a look at the 2D Text Tutorial for more information. In fact, I did some text drawing computations with a different graphics engine which is much more primitive, and in the end it was rather easy (at least for the single-line drawing, for going multiline see the previous link).
For the infinite canvas problem, that's also something I always wanted to be able to do. A quick search here at stackoverflow gives this which sounds nice, althought I'm not sure I like it. What you can do, is use the way GIMP has a scroll area that can extend as you move - catch the click of the middle mouse button for marking the initial intention to move the viewport. Then, when the mouse is dragged (while the button is clicked) move the viewport of the jscrollpane by the offset between the initial click and the current position. If we moved outside the bounds of the canvas, then you should simply enlarge the canvas.
In case you are still afraid of some of the manual drawing, you can actually have a JPanel as your canvas, with a fixed layout. Then you can override it's paint method for drawing the connectors, while having child components (such as buttongs and text areas) for other interaction (and each component may override it's own paint method in case it wants to have a custom-painted rect).
In my last drawing test in java, I made an application for drawing bezier curves (which are basically curves made of several control points). It was a JPanel with overidden paint method that drew the curve itself, and buttons with custom painting placed on the location of the control points. Clicking on the control point actually was clicking on a button, so it was easy to detect the matching control point (since each button had one control point associated with it). This is bad in terms of efficiency (manual hit detection may be faster) but it was easy in terms of programming.
Anyway, This idea can be extended by having one child JPanel for each class rectangle - this will provide easy click detection and custom painting, while the parent will draw the connectors.
So in short - go for nested JPanels with custom drawing, so that you can also place "on-canvas" widgets (and use real swing widgets such as text labels to do some ready drawing) while also having custom drawing (by overriding the paint method of the panels). Note that the con of this method is that some swing look-and-feel's may interfere with your drawing, so may need to mess a bit with that (as far as I remember, the metal and nimbus look-and-feel's were ok, and they are both cross-platform).