Drakkonis

Veteran
Veteran
Joined
Mar 5, 2021
Messages
210
Reaction score
160
First Language
English
Primarily Uses
RMMZ
Ahh, graphics code, how I despise thee.

I've encountered an issue that, because I don't really "get" graphics code and barely understand what I AM doing, I can't seem to trace, let alone resolve. I'm essentially "faking" an old-school graphics setup using what little PIXI-related methods I've been able to figure out to any usable degree. Mostly to learn some of it, but I'm also hoping to make something interesting with it if I can get it working.

I have a pixel-drawing routine as the base for everything that gets drawn, using a filled rectangle. I do this because the resolution is variable, so pixels can be different sizes to fill the screen as needed. That works fine, to a point. Every other drawing routine will call the draw pixel function once it resolves a coordinate and a color for the next pixel. The problem is that after awhile it seems to just stop drawing to the screen. Even tested and functional functions stop drawing after that point. The problem was noticed when I attempt to blanket the screen with a single color. Like old graphics, it does this by drawing line by line, and each line pixel by pixel. Not the most efficient, but I'm going for emulating the old-school style here.

But after a certain number of lines, it stops partway through a line, and no other draw functions will draw anything to the screen. The code still runs and resolves, just nothing shows up on the screen anymore. The last pixel it draws isn't even a full rectangle, instead it draws HALF the rectangle as a triangle.

The lines also aren't being fully drawn to the right side of the screen, but I think that's an issue with my code and not completely related to THIS problem.

So does anyone familiar with PIXI have an insight for me? Is there some sort of drawing limit that I'm unaware of and am hitting? That's my current best guess, because the stopping point in the last drawn line differs based on the resolution I use for the whole thing.

Thanks in advance!
 

Anyone

Veteran
Veteran
Joined
Aug 24, 2019
Messages
257
Reaction score
353
First Language
German
Primarily Uses
RMMV
Ahh, graphics code, how I despise thee.

I've encountered an issue that, because I don't really "get" graphics code and barely understand what I AM doing, I can't seem to trace, let alone resolve. I'm essentially "faking" an old-school graphics setup using what little PIXI-related methods I've been able to figure out to any usable degree. Mostly to learn some of it, but I'm also hoping to make something interesting with it if I can get it working.

I have a pixel-drawing routine as the base for everything that gets drawn, using a filled rectangle. I do this because the resolution is variable, so pixels can be different sizes to fill the screen as needed. That works fine, to a point. Every other drawing routine will call the draw pixel function once it resolves a coordinate and a color for the next pixel. The problem is that after awhile it seems to just stop drawing to the screen. Even tested and functional functions stop drawing after that point. The problem was noticed when I attempt to blanket the screen with a single color. Like old graphics, it does this by drawing line by line, and each line pixel by pixel. Not the most efficient, but I'm going for emulating the old-school style here.

But after a certain number of lines, it stops partway through a line, and no other draw functions will draw anything to the screen. The code still runs and resolves, just nothing shows up on the screen anymore. The last pixel it draws isn't even a full rectangle, instead it draws HALF the rectangle as a triangle.

The lines also aren't being fully drawn to the right side of the screen, but I think that's an issue with my code and not completely related to THIS problem.

So does anyone familiar with PIXI have an insight for me? Is there some sort of drawing limit that I'm unaware of and am hitting? That's my current best guess, because the stopping point in the last drawn line differs based on the resolution I use for the whole thing.

Thanks in advance!
You're drawing everything as individual pixels using PIXI?
That sounds uniquely unwise, if true.

PIXI is a library that gives you access to PIXI.Sprite objects, which contain a whole lot of information & methods about the object, allowing complex interaction. Using that to draw "squares" for every pixel is like building a massive super-computer capable of calculating all the atoms in the universe, so that you can heat your toast on the computer casing.

Not seeing the actual code, I can't tell you whether the problem is your code or that you're overtaxing the system, but you may want to check the performance tab when ingame & having the console open to track what's going on with your processes and where the load is.

If you absolutely wish to use PIXI to render what could just be done in basic JS, you should not use PIXI Sprites, but PIXI particle containers:

These are used to render hundreds of small sprites and are a lot "slimmer", so they don't have a lot of the functionality of a sprite, but they're much faster to render.
 

Drakkonis

Veteran
Veteran
Joined
Mar 5, 2021
Messages
210
Reaction score
160
First Language
English
Primarily Uses
RMMZ
You're drawing everything as individual pixels using PIXI?
That sounds uniquely unwise, if true.

PIXI is a library that gives you access to PIXI.Sprite objects, which contain a whole lot of information & methods about the object, allowing complex interaction. Using that to draw "squares" for every pixel is like building a massive super-computer capable of calculating all the atoms in the universe, so that you can heat your toast on the computer casing.

Not seeing the actual code, I can't tell you whether the problem is your code or that you're overtaxing the system, but you may want to check the performance tab when ingame & having the console open to track what's going on with your processes and where the load is.

If you absolutely wish to use PIXI to render what could just be done in basic JS, you should not use PIXI Sprites, but PIXI particle containers:

These are used to render hundreds of small sprites and are a lot "slimmer", so they don't have a lot of the functionality of a sprite, but they're much faster to render.
The main problem is my lack of familiarity with graphics-related code. So when there's a problem, I'm more lost than usual in tracking down the actual source of the problem. I'm drawing pixels as rectangles in PIXI because it's the first thing I've found that looks like it would be simple enough to implement. In attempting to trace my problem I've even gone as far as attempting to manipulate imageData itself, but I had even LESS luck with that. And attempting to research the problem via Google has been less than helpful. I've already figured out the bar on the side of the screen, I was rounding the pixel size and it was chopping off DOZENS of pixels from the end of each row. Still no closer to figuring out why it suddenly just STOPS drawing entirely after a point. Still no errors, no change in behavior.... just.... no more drawing.

Using PIXI is not a requirement, and I'm not sure how to go about using basic JS for what I want. I barely know JS as it is. PIXI is already included and contains shape-drawing functions, so I figured I'd start there.

The idea I'm trying to go for is that of an old-school, low resolution graphics system. Where individual pixels are big fat blocks on the screen. But I don't want to have tons of graphical objects running around, I simply want the blocks of color painted to the screen, to be updated every frame. I already plan on cutting down on update workload by keeping track of when pixel colors change, and ONLY redrawing those that change.

The basic inspiration for this is the olcConsoleGameEngine created in C++ by the One Lone Coder on youtube. I essentially want to create something like that in JS that I can use for a base for retro-styled minigames in RPGMaker.

Edit: Without fully investigating every line of PIXI, I think I might have found the problem. I used an auto-changing loop for colors while trying to find out WHERE it was stopping, and so set my screen to 256 pixels wide. The final pixel of the 64th line is where it stops in that arrangement. That equates to pixel number 16384. In PIXI there's a line for max batch size with that number in ParticleContainer. So if that's the culprit, that means the final vertex of that pixel isn't being stored, leading to the last pixel being a triangle instead of the rectangle I expect.

I think a backup Graphics object may help, but I would still like to investigate simpler, faster methods for doing what I want. Currently the initial screen setup takes a few seconds. Haven't had a chance to test pixel changes via updates yet.
 
Last edited:

Anyone

Veteran
Veteran
Joined
Aug 24, 2019
Messages
257
Reaction score
353
First Language
German
Primarily Uses
RMMV
The main problem is my lack of familiarity with graphics-related code. So when there's a problem, I'm more lost than usual in tracking down the actual source of the problem. I'm drawing pixels as rectangles in PIXI because it's the first thing I've found that looks like it would be simple enough to implement. In attempting to trace my problem I've even gone as far as attempting to manipulate imageData itself, but I had even LESS luck with that. And attempting to research the problem via Google has been less than helpful. I've already figured out the bar on the side of the screen, I was rounding the pixel size and it was chopping off DOZENS of pixels from the end of each row. Still no closer to figuring out why it suddenly just STOPS drawing entirely after a point. Still no errors, no change in behavior.... just.... no more drawing.

Using PIXI is not a requirement, and I'm not sure how to go about using basic JS for what I want. I barely know JS as it is. PIXI is already included and contains shape-drawing functions, so I figured I'd start there.

The idea I'm trying to go for is that of an old-school, low resolution graphics system. Where individual pixels are big fat blocks on the screen. But I don't want to have tons of graphical objects running around, I simply want the blocks of color painted to the screen, to be updated every frame. I already plan on cutting down on update workload by keeping track of when pixel colors change, and ONLY redrawing those that change.

The basic inspiration for this is the olcConsoleGameEngine created in C++ by the One Lone Coder on youtube. I essentially want to create something like that in JS that I can use for a base for retro-styled minigames in RPGMaker.

Edit: Without fully investigating every line of PIXI, I think I might have found the problem. I used an auto-changing loop for colors while trying to find out WHERE it was stopping, and so set my screen to 256 pixels wide. The final pixel of the 64th line is where it stops in that arrangement. That equates to pixel number 16384. In PIXI there's a line for max batch size with that number in ParticleContainer. So if that's the culprit, that means the final vertex of that pixel isn't being stored, leading to the last pixel being a triangle instead of the rectangle I expect.

I think a backup Graphics object may help, but I would still like to investigate simpler, faster methods for doing what I want. Currently the initial screen setup takes a few seconds. Haven't had a chance to test pixel changes via updates yet.
PIXI isn't really meant for graphic drawings like that. The ability of pixi to draw shapes is more like a far removed sub function that exists mainly so you can use basic functionality in addition to bitmap images.

JS, by default, allows you to draw things. All you need is a canvas (which you can imagine like an actual canvas, a space you can draw on) and a function that draws things. (Which JS has by default)

You can set up a canvas:

And draw elements via rect & stroke:

Here's an example of a simple html page with javascript as script:

You can use this to...
1: Create a Canvas
2. Create a PixelObject class
- which has an update function and registers itself in a Pixel Controller
3. Have a updating function in your RPGM scene or otherwise a setInterval function repeatedly class the PixelController's update function, which itself calls the update function for every registered PixelObject, which will then redraw themselves based on whatever data they have stored.

That's vastly more lightweight than using PIXI.
And if it must be PIXI, I still maintain you should use the PIXI Particle Containers to avoid overtaxing the system.

Did you check the performance in the dev console, to track what load the processes create?
 

Latest Threads

Latest Profile Posts

Creating 3D CGs for Cutscenes. :kaosalute:

I keep wanting to post every song I make for the game and have to hold back on that because at this rate, I'll have spoiled all the really good stuff lol..
DerniBorges wrote on TSR's profile.
Is there any way this plugin works with the big character, and the QSprite plugin? Using RTP chars, everything works fine, but the big ones, with QSprite, it's like that in the image, it doesn't reflect right. And there is, in the settings, an option to fix it. Thanks.
bug2.png
Bengawan Solo with fantasy style arrangement. :D
So I just got my computer back (Was posting stuff on my phone) But now my dang monitor's broken! I'll need to get a new one, which means... JOBS! Yaaay... When I get a new monitor, I'll post picture of one of my RPGMMV projects.
Wish me luck... :kaodes:

Forum statistics

Threads
115,897
Messages
1,093,800
Members
151,141
Latest member
daisyiscute
Top