bitsy

a little engine for little games, worlds, and stories · By adam le doux

Add to collection

tool Community Devlog

bitsy community » bitsy » tips & help

Understanding Asset Sizing

A topic by ExoticButters83 created 20 days ago Views: 154 Replies: 4

Viewing posts 1 to 4

ExoticButters8320 days ago

Greetings!

I am working on the concept for a small pixel game I want to make for my spouse. The idea is to have them walk through a museum, with the exhibits being references to important things in our relationship. Things are going really well with developing the idea so far, and designing the assets, but the problem I'm running into is I don't understand how sizing works for assets in the game. I struggle to even explain what I'm struggling to understand so others have not been able to help me and I've tried for days to research and use tutorials but none of them explain the thing I'm struggling with. I think my autistic brain is just maybe making things too complicated/needing to understand every individual thing perfectly before possibly trying to do the thing because What If I'm Wrong and then everything I made can't be used and I did all that work for nothing? Anyways, I'm going to do my best to break down what's confusing me in the hopes that someone can help.

I know you can make the assets in Bitsy, but only using an 8x8 canvas. I want to have more detail than that, so I decided to design everything outside of Bitsy and import the assets after.

Because I want it to start with you outside the museum looking at the front of it and then walking in, I started with designing the museum facade. I first did this on a 36x36 canvas, but found I still wasn't able to get the level of detail I really wanted so I moved up to the next highest size which was 48x48. I was very happy with what I was able to accomplish on this so I continued making everything on this size canvas, usually taking up most of the canvas.

Now, this is where I'm really confused and have been unable to get an answer that my brain can understand. I'm making everything on the same size canvas, so they all have the same like...pixel ratio, I guess? Which I think is important as I've ready mixing them can lead to things looking incoherent or messy. But some of these assets are obviously going to have to be displayed at different perspective sizes. Like, I can't have the avatar the same size as the museum facade. But since they're made on the same size canvas, that means some will have to be like, scaled down, right? Resized? This is what confuses me. 1. How do I do that? 2. Will it end with the details being lost? Is it going to resize like a normal photo would because I'll be importing it as a png or will it resize by actually removing pixels? So basically like, am I borking myself by making them all to my preference on the same size canvas? Am I going to HAVE to have them be smaller anyways? Do I just need to figure out what size the assets will have to be to show the proper ration between each other and make specific assets on those size canvases and just learn to be happy with what I can do with that size?

I'm really hoping someone can understand what I'm trying to say and help. I've been reading tutorials and articles and things for days and have not seen anything explain this. They all say how important it is to be consistent and not mix sizes but then they don't explain how these things work and I'm so confused. I feel like everyone else knows something I don't and they can't even fathom someone not knowing so nobody even things to explain it. Reddit wasn't mean, but I kept getting "answers" that weren't to my question, so I don't think anyone understood what I was actually saying, and I felt like I was speaking a different language. I really wanna keep working on this project, but I don't want to move forward until I understand this so I don't waste my time making assets I love only to realise I can't use any of them/they'll be "ruined" by losing all the details I worked so hard to get/was so proud of.

Thanks to anyone who read all this and is willing to help me learn!

handstamped20 days ago (1 edit)

Not sure if this will help, but the effective total pixel count of each room is 128 x 128 (16 x 16 tiles of 8 x 8 each). Perhaps it would make sense to render the entire room including all the artworks using https://ruin.itch.io/pixsy. You can then overlay any interactable sprites or items.

ExoticButters8319 days ago

Ohh, okay. So I think this means like, I could technically still make things using as many pixels as I want, they would just span across several tiles to fit it together like a puzzel.

I still don't really understand how to know what sizes to make the different aspects in order to make sense proportionally to each other, but this does help me better understand my options at least. Thanks for the tip! This at least helps me feel I can accurately convert my assets into Bitsy

Peter Februar19 days ago

Hello, i'm a no-code guy enjoying game design tools.
My humble take on what you say you don't understand:
1. is image resolution the secret noone will tell you?

I don't think so, because you created assets with multiples of 8.
It doesn't matter if your original picture is square. You need to adapt it to how it will be rendered.

2. is it that Bitsy has a stable number of pixels?
As a javascript blob (from what i understand), Bitsy offers a gamedesign experience which is necessarily compact.
Here the sounds and images and canvas size are minimastically designed on purpose.
(to make it work first i guess? or to save RAM space and make it work online?)
So in this Bitsy engine, picture size is fixed, 8x8 for all, sprites n' avatar n' stuff.

...Maybe you'd like to find a double-down alternative here. (Bitsy HD) https://vonbednar.itch.io/bitsy-x2

I really wonder how you managed to import assets in Bitsy.
Anyway, yeah, you're going to HAVE to have them be smaller anyways.
Or redraw it. The pixsy solution mentioned above is good for rooms but can't upload sprites.
Sorry for your potential art loss.

Hope this helps.

ExoticButters8319 days ago

Hi!

I think what I've realised is that there is no real answer. I think I was in some way confused about both things you mentioned even though as you said, the first one isn't an issue, I was just kind of misunderstanding/overthinking some things.

What I realise now is that while I can have everything made on the same size canvas, they'll then all be the same size proportionally, which obviously doesn't work. I did find a bitsy-like program that I really like the UI of as it makes sense to me and isn't overwhelming, and I like the options it has (it's called Whimtale, formerly Whimsy) and in messing around with that I've gotten a better idea of things because I could see it in action.

I didn't actually go through with the process of importing into Bitsy, but had found a hack for it.

My issue now is trying to figure out what the right ratios will be. Obviously to make proportions seem right, my avatar needs to be made at a different size from the other assets, like a column or the displays on the museum. Which I've seen can be made using more than one canvas and pieced together, like taking up one whole 16x16 canvas for half a column, and another for the other, then stacking those to make the column. That is helpful, but now I still have to figure out what my base is going to be and how to get things proportional from there. It seems the first place to start should be my avatar, figuring out how big that should be, and then how big the whole "room" or "scene" should be, and then the individual assets so that everything makes sense and doesn't look like the character is too small or too big compared to other things. That's ultimately where my problem lies now.

Thanks for your reply! This was actually really helpful especially since I saw it after messing around more and getting a visual to some of this so I could better understand what it is I need to know and what I have to work with.