need a way to display graphics without the default show picture command

[Amarok]

Hello there! i hope everyone is doing well and safe in these times.
Since the quarantine prevents me from working i went back to coding and rpgmaking, kept experimenting with js and
made my own roguelike system, everything works fine except one thing.

Performance is terrible, most probably because im always displaying +700 pictures all at once.
The way i made things, every single graphic you see on the screen is a picture just the tiles alone on the screen are 720 pictures.

So i know mv runs on pixi.js my question is, how could i display all these graphics with a reasonable performance?
Maybe drawing graphics directly with pixi? total coding noob here, dont kill me ;D

thanks in advance, and again i hope everyone is safe and sound.

 

[Eliaquim]

When you mean roguelike, you mean that your maps are random? Or do you have a map that is revealing as player walks?

 

[Amarok]

@Eliaquim both things actually, the entire game world is generated at the start and is uncovered as you walk on it. Thats the main reason i started to code this, i wanted to have 100% control over each tile that makes up the world.

 

[gstv87]

how could i display all these graphics with a reasonable performance?

THE most accurate way would be the way it's already done: make a giant picture (which is the map itself), frame it with a viewport, and don't change it.
if you need to reveal tile by tile, you can probably still make a giant picture out of individual cutaways, but place a sprite on top of each one, and toggle that sprite on or off.

every time you draw something on screen, you have to update the object you draw to see those changes, so if you do it right you could just work with as many updates as tiles there are, but that would still happen every time you move (as opposed to, every single frame), so you will have the occasional lag spike.

the generation of the map by default is based on the values of the grid saved by the editor.
so, that would be your entry point for your random system to pass those instructions to the renderer.

 

[Amarok]

@gstv87 im not sure if i could make the whole thing a single picture, i have different 48px tile pictures that i use for each tile, since the graphic of each tile changes dinamically if its unexplored, covered in fog of war, if there is blood, water, gas on it, etc. Thats the primary reason for wanting to have a different picture for each tile.
And about the performance, here is the thing, the game goes perfectly on my end, but i notice my cpu usage going well up to 90% at times, which is absurd. Beyond that, everything is fine but i worry about lower end system just burning from this.

 

[ImaginaryVillain]

It's like you're me... but from 6 months ago. I eventually ended up going a completely different route for map generation. But one thing I did back then was whenever I spawned in an event that represented a tile/obstacle I would add it's X/Y coordinates and it's event ID to an object, then add that object to a large array.

Then I created a culling setup where if the player was too far from something, it would despawn it. But I also had another that looked at that array and spawned stuff in just outside of the player's view based on what was previously there.

It was all unholy complicated. But it basically allowed for far larger event built maps than would normally be possible as you were always dealing with a predictable number of events and parallel processes. To this day I still use variants of this system, though not for my ground anymore.

 

[Ailius]

I think you can do what you want with events, the events themselves having 48 x 48 graphics.

I assume if you're running 100s of parallel events at once, you'll have worse performance problems, but if you download Yanfly's event manipulation plugins, only one or two events have to be running. The rest can be doing nothing, looking pretty.

 

[pasunna]

if you add img sprite to map
you don't need show picture at all
and name it as group all some thing

var มินิเกม_ท่อตัน_แมพ_createLowerLayer = Spriteset_Map.prototype.createLowerLayer;
Spriteset_Map.prototype.createLowerLayer = function() {
    มินิเกม_ท่อตัน_แมพ_createLowerLayer.call(this);
    this.createLowerLayer_มินิเกม();
};

check out Spriteset_Map
there are lower layer and upper layer
I use this to create mini game
lower is lower than normal show picture
I'm not sure about upper

all you even can add child to map it self
it will always on top

    this.ท่อฟิลด์ = new Sprite(ImageManager.ท่อ('bg'));
    this.addChild(this.ท่อฟิลด์);

and use img manager to draw the img you want
you can set it x,y visible freely
this.ท่อฟิลด์.x = etc
or even start it as an array
this.ท่อฟิลด์[1].x = etc
this.ท่อฟิลด์[2].x = etc
these can use only one update function bind to
Scene_Map.prototype.update
and use for loop handle it
or even the sprite update itself

sorry about performance I'm not really sure
just how I do thing
try check out about these in rpg_object.js

 

[gstv87]

@Amarok what I mean by "single picture", is that at load time the program reads the map file and renders one picture out of segments taken from the tileset.
the *map*, the object the player walks on, is one image, made at render time.

if you interrupt that process and bring in your own logic, you can use the game proper to do all the work.
the map itself is not refreshed unless you transfer from scene to scene, so it wouldn't refresh at every frame.... which is what would happen if you use pictures (unless you make a new class of picture, that doesn't tie to the upper refresh cycle.)

with that approach, the problem to solve would be the LOS sprite, to cover or uncover tiles.
one way to do it, would be a stretched sprite so that each pixel covers one tile, and you can both work with single-pixel commands, AND, boolean operators and distance checks to uncover regions of pixels at the same time.
that, CAN be made..... those are the tools you have, you figure out how to best apply them.

if its unexplored, covered in fog of war, if there is blood, water, gas on it, etc

how about a lower static layer and an upper dynamic layer?
if the dynamic layer always has less tiles to change (as in, not every lower layer tile will have something on top of them) just fix the lower layer, and only update the upper layer.
that'd require adding an additional object to the map scene (that one layer), with all it's logic.
more complex to do, but that'd enable you to use the single picture approach, for the lower layer.

 

[Amarok]

thank you everyone for the replies! i manage everything with a single event in parallel that just calls my own scripting when needed, i need some time to process all these options, will keep investigating and update the thread once i find a solution, thanks again!