Could I get some UX feedback on this pixel Drawing Game I made?

I Built This
1

(Someone changed the place for me. This statement is N/A right now, I think. → ) I don’t know if this is allowed here, and if it isn’t please do tell me!

If it isn’t and it needs to be taken down, I will take it down, and I apologize in advance for posting this here, when it isn’t allowed to be here.
I am still new, and I don’t understand the descriptions of the categories that well…

Anyway, here’s the link: Fox' Pixel Drawing Game.html · GitHub
I just want some feedback on what could be fixed, added, removed, etc.
NOTE: The UI is NOT finished, and not everything is labled! The reason for this is because I am focusing on making sure the core ideas work before adding things like that.

To draw use

  • WASD to move the cursor around (or the arrow keys)
  • Space to draw (can be held while moving)
  • E to erase (cannot be held while moving)
  • The color selector at the bottom to change the cursor color
  • The number value at the bottom for layer (does not draw under layers if you move the layer(s) down. That is a small fix I need to do soon. Right now, not too big of a priority to me.)
  • The 500 default number values to change the canvas size
  • The 10 number value to choose between 5, and 10 cursor size (I will add more sizes sooner or later.)
  • The top 1 number value to change the step size
  • Save is saving a file to your device
  • Load is loading a file from your device (the .fpd file you get when saving the drawing)
2

Hi @FoxTime_Plays,

I changed the category since you are asking for feedback on your code.

Happy coding

1 Like
3

Thank you! I appreciate it!

4

:warning: Warning :warning: Can cause lag with BIG projects!
It is not 100% optimized, but I am still learning.

5

This looks like a fun project, especially because you’re focusing on getting the core drawing functionality working before polishing the UI.

One thing I’d consider next is making the controls a little more self-explanatory. Since there are several numeric inputs for canvas size, cursor size, layer, and step size, short labels or tooltips could make the first-time experience much easier.

I also like the save/load approach with the .fpd file format. It would be useful to show a small status message after saving or loading, such as “Drawing saved” or “File loaded successfully,” so the user knows the action worked.

For the drawing experience, an undo/redo history would probably be a valuable addition once the core functionality is stable. Even a simple Ctrl+Z / Ctrl+Y implementation could make experimentation much easier.

For the next UI pass, I’d also test the game with different canvas sizes and keyboard-only navigation. That could reveal usability issues that aren’t obvious while developing the core functionality.

Overall, I’d keep prioritizing the core functionality first and then simplify the controls once everything is stable. It already has a good foundation for a small pixel editor.

1 Like
6

@JuniTech
Thank you for the feedback! I have been thinking about adding the undo/redo feature, but I’ve been pushing it off because, at the time, it didn’t seem too important to me.
I’ll add it as soon as I can though!
The UI, I will add some explanitory things to it, that way the experience can be better for everyone!
One of the main reasons I have been waiting to do the UI is because it is slightly more tedious, and I don’t need to change much to any of the main JS.

Anyway, I REALLY appreciate the feedback! It means a lot to me! Thank you!
Hope you’re having a great day/evening/night!

7

So, I deliberately used activeElement.blur() due to the fact of how I made the game… I know it is generally not something that SHOULD be done, but I did it because of the main way I made the game… In order to place a pixel, you use space, but if you are focused on a button, let’s say, you’ll activate that instead..
I don’t know if the canvas is ever able to be focused, but I do know that if it can’t, full-keyboard access is currently unavailable.

8

The game has been updated!

I added a new feature that makes the cursor wrap to the opposite side of the canvas when gone past the canvas.
Still not exactly how I want it right now, but it works.

I will update it sooner or later, but for right now, this is how it is.

9

Fun Fact: I have been working on this game for a WHILE now (About 1 month and maybe a week to 2)

I have the core functions made, need to fix them.
I will also try optimizing the game a lot along the way.

I need to remake the core drawing function of how the drawing saves.
It will be so the drawing will change the lines from individual squares, into one long line. This will be hard to add, but I will add it.

10

Can someone who’s either a professional, or is REALLY good at coding look at my code?

I am asking if someone could look at my code, and see how well organized my code is, and give feedback on how I could make it more organized.

Here is my code: Fox' Pixel Drawing Game.html · GitHub

I would GREATLY appreciate it if I could get multiple different perspectives from multiple different people!

If you have some other thing to say about my code, I would be happy to hear it!

11

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

1 Like
12

Thank you, I appreciate it.

I am still quite new to this place, so it may take me a little bit to get used this

Anyway, I really appreciate it!

13

@dhess

Hey, do you mind if I DM you with some questions?

14

(I’m assuming that I have to put this here)

I made a new thing that goes along with this pixel Drawing thing, and it is a converter.

It allows you to convert your drawings from the .fpd file into a .PNG file, or a .jpeg file.
I wanted to do this because I thought it would be extremely useful to save images and show others without needing the game to show people, and you can also send it to people too.

Here’s the link: Fox’s-Pixel-Drawing-Converter

15

The core idea looks pretty fun, and I think getting the drawing mechanics working before polishing the UI is the right approach. Once the controls are labeled more clearly, things like the canvas size, cursor size, and step value should be much easier for a first-time user to understand.

1 Like
16

Thank you! I appreciate the feedback!

17

Yall, this new update is taking me FOR EVER to do…

I am trying to optimize the friggen game, but there is problem upon problem
It’s hard to do right now, but I will do it, but here’s the thing:
The kind of optimization is to reduce the amount of objects your computer is holding.
That means I have to make it so each line is combined into a whole line, rather than making it so each pixel is it’s own object.
This is HARD, and for someone who’s still learning coding, it’s going to take me a LONG time before I figure it out.
I REFUSE to use AI to write ANY of the code DIRECTLY into the game. I only use it to help me understand bugs, and help me debug things.
I always tell it to NOT write me the fixed code, and to HELP me.
Anyway, this is gonna be one of the best updates for this thing, and it’s gonna help people on chromebooks, low RAM devices, etc.

Fun Fact: I am coding this entire game on Chromebook, a school Chromebook at that (Teachers don’t mind, and the school doesn’t mind. they actually kind of encourage it. One of the reasons why I am making this too.)

18

A toggle for a pixel grid and an outline preview of the brush cursor would make drawing much more precise, especially when adjusting cursor size. Single-key shortcuts to toggle common tools or clear the canvas would also help, so users don’t have to keep leaving the drawing area to adjust numeric controls.

19

Hello! I’m back, and I want to say, thank you all for looking at my game (at least), and thank you for those of you who gave me feedback on the game!

(Note: The first thanks is becuase I see a number beside the link I posted, and I assume that it means that’s how many people went on it, or the repeated clicks from someone)

I have taken a small break to code something different that I won’t post or show (due to what it’s for. Clarification: It’s to external social media that I cannot post here, that I’m aware of.) I have been trying to figure out how to optimize this correctly, and when I do, I will say that I did, and then you all can see what I did, how it looks, how close it is to being in post-alpha/pre-beta stage. Right now, it’s early access to those who use it.
Anyway, I am gonna work on it more when I get the chance, I am just using this new project as a way to learn more about HTML, and so far, I have learnt A LOT about HTML. Still early-intermediate, but I am getting there. I added the lables to the pixel drawing game, but I cannot post the update yet because of it being added in the middle of the core-rewrite, and I didn’t want to make it so the newest update before the core-rewrite update to not be unfinished, and I want it to be finished.

I am very passionate about this project, and I want it to come out as best as it can before I add it. I don’t want there to be many to any bugs when I post it, and I want to be able to get mostly UX feedback.

I asked if someone who’s REALLY good at coding to look at my code, and see how good/bad my organization is, but so far, I don’t think anyone has seen it.
I would GREATLY appreciate it if someone can, but it isn’t NEEDED. I can work on it without that kind of feedback.

I am gonna work on the updates of the game, then possibly add a start screen, and possibly a separate saving function so you don’t have to constantly reload your images with a file.

Once the basic game is done, I will start updating the converter. It will allow more than Jpeg and PNG. It will be able to do some other things too. Like, organize the data within a file, so you can read the file type better.

Anyway, thank you all, and have a good day!

20

Hello! Funny enough, I have added it, but I am working on the core functionality of the game. Since the game isn’t finished yet, I won’t be publishing the newest update until it is done. I am almost done with finishing the update, so if I work on it, every day, for at least 2-3 hours, I will probably have this done before one month is done.
Now, will I be able to do that? Not likely, but I have added keyboard functionality, the outline is already a thing (WASD to move, for BLACK (rgb: 0,0,0) there is a light gray outline.
Actually, I think the stuff is already added into the game..
If they were, “y” is to clear the screen, “r” is to reset the cursor, “c” is to activate the cursor color changer, “IJKL” is used to MOVE the drawing around, and “k” is to change movement keybinds (main movement keybinds)