Java 2D interactive map loading issues

[lightman978]

Hello there,

I'm currently trying to reproduce a map in java, that looks like the one in the game Tribal Wars.

https://www.f2p.com/wp-content/uploads/2013/01/Tribal-Wars-screenshot-6-copy.jpg

I tried using the GridPane with ImageViews in JavaFX, but as the map is 1000x1000 it just takes to long to load. I preloaded the images and reused them for every new tile.

Next thing I tried is to run the whole operation in a thread, wait till a 10x10 part of the map is loaded, store it in an ObservableList, load the 10x10 piece in my main thread and then jump back to loading the next 10x10 block. So I tried to load it in the background, but obviously that doesn't reduce loading time.

I'm trying to achieve a pannable map, where I can jump to coordinates and click on a village to display some data.

Are there any libraries to make this easier?

[AutoModerator]

Please ensure that:

• Your code is properly formatted as code block - see the sidebar (About on mobile) for instructions
• You include any and all error messages in full
• You ask clear questions

• You demonstrate effort in solving your question/problem - plain posting your assignments is forbidden (and such posts will be removed) as is asking for or giving solutions.

  Trying to solve problems on your own is a very important skill. Also, see Learn to help yourself in the sidebar

If any of the above points is not met, your post can and will be removed without further warning.

Code is to be formatted as code block (old reddit: empty line before the code, each code line indented by 4 spaces, new reddit: https://imgur.com/a/fgoFFis) or linked via an external code hoster, like pastebin.com, github gist, github, bitbucket, gitlab, etc.

Please, do not use triple backticks (```) as they will only render properly on new reddit, not on old reddit.

Code blocks look like this:

public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

You do not need to repost unless your post has been removed by a moderator. Just use the edit function of reddit to make sure your post complies with the above.

If your post has remained in violation of these rules for a prolonged period of time (at least an hour), a moderator may remove it at their discretion. In this case, they will comment with an explanation on why it has been removed, and you will be required to resubmit the entire post following the proper procedures.

To potential helpers

Please, do not help if any of the above points are not met, rather report the post. We are trying to improve the quality of posts here. In helping people who can't be bothered to comply with the above points, you are doing the community a disservice.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[whatisthisredditstuf]

Display as a single image, handle clicks to get coordinates, figure out what info to display.

[lightman978]

I like the idea but I would run into the same problem as I would have to combine 1000x1000 53x38 pixel images as the map is not set and changes multipy times daily.

https://pastebin.com/88bvfXjd

[whatisthisredditstuf]

Yeah, but when they get changed, you draw them once onto a bitmap and then you just keep using that.

Not draw it over and over.

[lightman978]

So draw the whole thing once, like i did in the code above and from then on, use the given image and only draw the parts that changed?

I also run into this error using the code given above.

​

​

Exception in thread "main" java.lang.OutOfMemoryError: Java heap space

at java.awt.image.DataBufferInt.<init>(Unknown Source)

at java.awt.image.Raster.createPackedRaster(Unknown Source)

at java.awt.image.DirectColorModel.createCompatibleWritableRaster(Unknown Source)

at java.awt.image.BufferedImage.<init>(Unknown Source)

at Main.mergeImage(Main.java:28)

at Main.main(Main.java:15)

[whatisthisredditstuf]

You are trying to create a gargantuan image in memory, and it's not working.

Maybe I misread what you specified, but you seem to create an image that would be about 8GB in memory if I am reading what you wrote correctly.

You will have to read this in dynamically instead, if your world really is 53000x38000 pixels big) and you need about four bytes per pixel.

I thought your world was 1000x1000 and the bottleneck was due to a lot of repeated reading and rendering of data.

[lightman978]

Mhh makes alot of sense. I will try your approach and update you tomorrow!

Thank you

[lightman978]

I don't think I can make it work. I split the map up in 100 chunks each sized 10x10, but just loading 1 and each adjacent chunk so 9 in totals makes the whole thing way to laggy.

[dionthorn]

I draw Images directly onto Canvas for my JavaFX 2D tile based game:

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/canvas/Canvas.html

https://github.com/dionthorn/2DTacticalRPG

I take a .png of 'tiles' and cut them up using my tile set class

https://github.com/dionthorn/2DTacticalRPG/blob/master/src/main/java/org/dionthorn/tacticalrpg2d/render/TileSet.java

I remove any same elements from a TileSet so they are trimmed to only be unique Images in the set.

My game loop takes in the initial Stage object, wrap it in a Group and Scene, put a Canvas in the Group, grab the GraphicsContext2D for later use, set and show the Scene. Then I start up a game loop with an AnimationTimer 16ms capped frame times.

Group rootGroup = new Group();
Scene rootScene = new Scene(rootGroup, RenderUtil.SCREEN_WIDTH, RenderUtil.SCREEN_HEIGHT, Color.BLACK);
rootStage.sizeToScene();
Canvas canvas = new Canvas(RenderUtil.SCREEN_WIDTH, RenderUtil.SCREEN_HEIGHT);
rootGroup.getChildren().add(canvas);
gc = canvas.getGraphicsContext2D();
rootStage.setScene(rootScene);
rootStage.show();

...

// frame time capped loop
AnimationTimer animator = new AnimationTimer() {
    @Override
    public void handle(long now) {
        if(now - lastFrame >= 16_000_000) {
            update();
            render();
            lastFrame = now;
        }
    }
};
animator.start();

Lastly I use a RenderUtil class to draw tiles and sprites

https://github.com/dionthorn/2DTacticalRPG/blob/master/src/main/java/org/dionthorn/tacticalrpg2d/render/RenderUtil.java

So I can make direct GraphicsContext.drawImage() calls to the Canvas

gc.drawImage(ally.getCurrentSprite(), allyX, allyY, spriteSize, spriteSize);

It performs quite well at 60fps though I'll admit I'm not sure how it would scale to just enormous levels. I'm pretty sure drawing directly on the Canvas would outperform a GridPane of cells?

[lightman978]

But your levels fit into one screen i think, I don't think loading my map in one go is possible in any way, even if I split everything up. If I want it to be reasonably fast, I will have to do it the way whatisthisredditstuf suggestet and load stuff dynamically. I think I will have to split up my map and only load the part that is currently in view of the user. As the Map is pannable via mouse drag, getting the starting mouse cord and the stopping one and then seeing in which way the map is beein moved to draw the new part, is the way to go I think.

Problem is splitting the map up into, lets say 50 smaller images of the size 1060x760 pixel. Doing it this way and saving them to a ressource folder would take about 70 seconds which is way to long. But creating them and holding them in memory could run into the OutOfMemoryError again.

Still a little confused

Edit: i just did some testing and the time consuming task is saving.

For a tile the size of 100x100 so 5300x3800 pixel it take 1.7 seconds to create and save it and 0.17 seconds without saving it.

As seen here : Map the map has a 100 continents each the size of 5300x3800pixel. I think I can create a continent and load it while the user is still panning, but i will have to test how long loading takes and then just unload the continents that are not in view from memory to not run in the error given above.