Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

The Only Room I’ve Ever Seen

A topic by ver created Sep 21, 2020 Views: 902 Replies: 15
Viewing posts 1 to 13
(1 edit)

Hi, hello, thanks for being here.
My name is Oliver (they/them) and I am making a game in Bitsy for the first time. The working title is “The Only Room I’ve Ever Seen.”


Hold on, let me collect my thoughts 

A friend of mine is hosting a daily art challenge this October. I’m taking this  opportunity to challenge myself by making making a room a day in Bitsy based on the theme having them all merge together in a single game.

WOOF.

This is going to be very simple and basic. Hopefully. I have a tendency to over-complicate and get over-ambitious with coding projects. So I decided to make a devlog to hold myself accountable. And maybe get some feedback.


And I just started

Yesterday I played on Bitsy for a bit, but today I built my first functional room with its first functional coding of conditional dialogue. Which took longer than I wish it did and I am unsure of how to duplicate. (:

This is going to be a little autobiographical art game. The setting is my studio apartment. The characters are me, my spouse, and our cat. The premise is our life in lockdown in the simplest of depictions. I’m really excited to explore this medium of storytelling and to come out the other side of this with something complete even if it’s a little clunky and possibly boring! 

I started today so I could get a handle on the software, figure out what the workflow looks like, and make the first setting (which I saw as the biggest lift... lol)


Thanks for reading, here’s my first finished room and interaction in gif form.



(+1)

Hey Oliver!

The room looks great! Keep at it - I put out my first Bitsy story/game and my experience was similar to yours. Things taking far more time than you’d imagine they should. However, they get much much easier as you go on.

(+1)

Thank you so much for the encouragement! I think you're totally right and I look forward to things coming more naturally. It's already happening (:

(+1)

I look forward to seeing more of it!

Right. Script.

It’s not that I don’t know that games need written scripts— it’s just that when I was first conceptualizing on this game, I didn’t think it would be completely necessary. Now I have a full notes document to jot down ideas and make sure I’m capturing them instead of doing that thing where you think you’ll remember for later and absolutely don’t. 

I’ve always wanted to write something like this. That’s what I’m realizing every time I open my document. Something personal and intimate but short. (Short enough at least. Every time I go into this document, I get worried about length.) It’s fulfilling. Having a plan and being able to think of what the scene around it is going to look like and thinking about the limitations is invigorating. 


Bitsy has so many hacks

It seems pretty clear that the Bitsy community loves their hacks. And why wouldn’t they? It’s exciting to be able to make things have functionality they normally aren’t able to, especially functionality that enables further artistic expression.

Admittedly, there’s this part of me that was really resistant to the idea of using hacks. Part of me thinks it’s “cheating” in some way and that the point of Bitsy is to stick to its limitations and work with what you have.

Another part of me thinks that’s an unfair assessment. Game development is all about finding new ways to make the technology do the thing you specifically want it to do. And if the Creator of The Software uses the hacks, how is that cheating? 

All this to say, with the scope of what I want to do: hacks are almost unavoidable and easy enough to use that I don’t think I should be resistant to them. I’m specifically thinking about using the Bitsy museum hack, the transparent sprite and avatar hacks, possibly the follower hack, and the one that makes the page the same color as the palette’s background color.


Discord rocks

I joined the Bitsy discord and it feels really good and encouraging to be in a community despite not having participated much so far.  It made me realize I could ask for help and get assistance if I needed it. 


I don’t have any visuals to share in this update. All I’m doing is massaging a few details in the previously shared first room and trying to make sure items can comfortably live on top of surfaces. Establishing certain tiles as places where items can be placed later. That kind of thing.


Alright, thanks for reading. Be well.

I made a lot more assets for The Only Room today and oh boy.

Through script-writing and brainstorming, I've decided that a few scenes are going to be on a phone, television, and laptop screen. So I decided to make the templates for those today. Which has inspired me to share my current pre-Bitsy process.


So this is my current pre-Bitsy process

In Photoshop, I have a canvas with a resolution of 8. Eight. Eight pixels per inch. The canvas size is 128 x 128 pixels. And it's zoomed in anywhere between 1000% and 5000%. With gridlines, I've sectioned this off into 16 squares to imitate the Bitsy in-browser canvas. I use colors that skew on the darker side, but still contrast each other to make sure that I can see the Photoshop itty bitty pixel grid on top of my pencil brush markings. That's a 1px pencil brush tool.

It looks something like this image I've attached in here:

It takes a bit of adjusting from there and I can guarantee that it will be adjusted more when I transfer these into Bitsy tiles.

This is probably the least detailed of any of the things I made today. Lots of playing around with ratios and how to streamline the next steps (making that connects outside so the frame doesn't have to be altered once content is added and reduce the amount of tiles ultimately needed).

I'm thinking about the tools that exist that can turn this kind of thing into a Bitsy without me having to do it manually, but is it wild that I kind of enjoying doing it manually?

I was curious about how these screens looked when exported at resolution they exist as in Photoshop, so here's a summary of 128x128 rough drafts.


Thanks again for reading. Be well.

(3 edits)

Welcome back to me learning Bitsy and being overambitious with my goals.

I've been trying to wrap my head around how to post this because I think my original goal was to put a tiny game on my page each day of October, but I don't think that's what I want to do anymore since I want this to be one big cohesive thing. Instead I'm just going to post a log of what I did for each day and what I learned, post some progress gifs, and the html file  to play and mess with.

Prompt 1: Rainfall
[html]


Today's vignette is about the smoke from the Californian wildfires that overtook the pacific northwest and the rainfall that helped clear it away. Told through checking the weather on my phone.

I started with the main studio and the phone. My reconnaissance let me know I could merge Bitsys and I could use different avatars for different rooms. I have not done a ton of coding and I did not know exactly how. So today was about learning how to do that more than anything. I spent a lot of time combing through source code and game data, trying to fulling understand the formatting and what the code was telling the software to do. I felt like I had almost figured it out, but resorted to asking the Bitsyfolk for help (tysm). 

I was missing some commas. Classic.

I've learned a bit about pacing, the format of the Bitsy game data (and how to make changes from the game data plain text file), some file organization habits, and how to utilize hacks.

There's a few changes that need to be made to this section and I don't know if it's even going to be the first vignette in this whole thing. But. I feel good about the work I've done here today.

Hacks used: Sean's merge bitsy tool and Sean's Avatar by Room hack via Borsky

Prompt 2: Armor

[html]


Today's vignette is about clothing and the way my wardrobe has changed in the last few months. Told through looking at my closet.

Today was a lot of iteration on the first level and adding some things to make it a little more interesting and engaging-- which meant adding my cat and spouse. I needed to add another avatar in another room and also continue utilizing the phone avatar. I don't think these are the only avatars I plan on using. And maybe I'll just use the sparkle avatar when the avatar isn't me.

I also wanted to make sprites transparent, but didn't have the patience to figure out how to only make specific sprites transparent. That's something I need to tackle soon though. 

Text is a little garbled and in the closet as well. Text in Bitsy admittedly confuses me a little bit. That's on this never-ending list of things I need to figure out.

I also want to use Sean's bitsy optimizer when I get closer to the end of this project.

That all being said, I welcome critique and suggestions for improvement as I continue to post progress.

Hacks used: Sean's Avatar by Room hack and Transparent Sprite hack via Borsky

This is actually pretty cool! What did you use to code it?

(1 edit)

Thank you! 

I'm working in Bitsy! A lot of the coding is baked in when the game is downloaded, but it has a simple gata data language that can played with on any plain text document editor as well. 

Bitsy is written in Javascript

Prompt 3: Private

[html]


Today's vignette is a hot take through my journal saying that 2016 -- not 2020 -- was the worst year of my life so far.

Added a few things to other rooms and took it easy today. I fixed some of the dialogue issues and learned how to use page breaks. 

I tried to make only certain sprites transparent and then I was having trouble and gave up for today. Maybe I'll figure it out tomorrow. I don't have that much of a plan for tomorrow. 

Hacks Used: Sean's Avatar by Room hack, Transparent Sprite hack, and Dialogue Pause hack via Borsky

(2 edits)

Today's Prompt: Round

[html]


Today's vignette is about playing Smash with my younger sibling and how family makes me feel.

I was trying to think ahead to tomorrow's prompt (Explore) and had a brain blast about how that could make for a good opening (since right now there's not really a proper opening). So I put down the bones for that this morning by utilizing some shuffling dialog text (my favorite programming feature in any engine).  The phones will be filled tomorrow.

Here's an example of how that's used here

What day is it?
{pg}
It feels like a ... {shuffle
  - Monday
  - Tuesday
  - Wednesday
  - Thursday
  - Friday
  - Saturday
  - Sunday
}.

I removed pauses from dialogs because I was doing a bad job of programming them and didn't want to deal with them.

I'm also continously on my journey to figure out how to make only certain sprites transparent. I went as far as asking the Sean on the Bitsycord and getting a confirmation for how some coding looked, then still having trouble in Borsky after going from naming those sprites with a tag that was "transparent" then "isTransparent" and neither working. I'll figure it out. I need to clean up some of the game data to streamline it so I can easily poke around. (What are free html/plaintext editing software for Mac that are good?)

Hacks used: Sean's Avatar by Room and Transparent sprite hack via Borsky

Today's Prompt: Explore


Today's vignette is about not being able to get out of bed and exploring on my phone instead.

No html today because I'm having a hard time with it right now and working on renaming assets and tiles -- which might be why I'm having issues right now.

Alright, see you tomorrow.

Today's Prompt: Paw
[html]


Today's vignette is about my cat dying earlier this year and how my spouse and I have processed the grief. RIP to the late and great Juniper Jones. Today also happens to be her birthday.

Today comes with a lot of victories, so I'm posting code for posterity.

I finally got the tagging system for drawings to (mostly) work! Here's how the code there looks now.

    isTransparent: function (drawing) {
         return drawing.name && drawing.name.indexOf('transparent') !== -1;
    },
After struggling with the avatar by room hack for a bit, I decided that I would just use the user-generated room name and that would help me in the long-run anyway. And it did. I was having problems with making the ID of the sprite I wanted to use 'B' instead of the arbitrary procedurally-generated ID, so I duplicated the sprite and used it's new ID.  So now we have the avatar by room code looking like this

permanent: false,   avatarByRoom: {
  'Open': 'A',
  'Explore 4': 'rainz',
  'Checkpoint 1': 'A',
  'Checkpoint 2': 'A',
  'Explore 1': 'rainz',
  'Explore 2': 'rainz',
  'Explore 3': 'rainz',
  'Start': 'A',
  'Private 1': 'rainz',
  'Private 2': 'rainz',
  'Round': 'rainz',
  'Rainfall 1': 'rainz',
  'Rainfall 2': 'rainz',
  'Rainfall 3': 'rainz',
  'Studio Side Closet Yes Rain': 'A',
  'Armor': 'rainz',
  'Paw': 'rainz',
},

Which is heavy but also whatever I'm glad that it works. 

I keep going back and doing little fixes to different parts of the text and I predict that will happen for the rest of this month of working on this. MONTH.

I'm about 20% through the month and I like watching the file size just get bigger and bigger. Satisfying. 

I'm afraid to rename things now so I'm going to leave that all alone and have some messy back-end files. This is my first forray so that feels right anyway. I've learned a lot already.

After the success of today, I almost went right in to trying to use the follower hack, but then I decided to save that for another day.  Especially since I only want a follower for one room right now. I think the options are going to look something like this (leaving in notes)? I might play with it later today.

var hackOptions = {
    allowFollowerCollision: false,     followers: ['raino'], // ids or names of sprites to be followers; use [] to start without a follower
    delay: 100,     stack: false,
};
Hacks Used: Sean's Avatar by Room and Transparent sprite hack via Borsky

Can you believe that I felt so successful after Paw that I didn't post again for 3 days? That and politics generally making me feel nuts.

I'm not posting html for these three days because not a lot has changed and I don't want to. But here they are:

Day 7: Warm

Day 8: Analogue

Day 9: Pathway



When I started this, I had quite a few of the prompts fleshed out and had done a bit of writing and designing in advance to lighten the load of my future self. 

I have reached the point where I have caught up with myself and now have to generate new ideas the day of.

That being said, a note that I want to make here is that I don't have a flow for how the game will go planned out. I don't know where each new piece to explore fits in with the next. I'm really enjoying the process of figuring it out. This is allowing me the opportunity to think about the timeline of what my life has been like, what I think is important to share, and how a lot of different other pieces fit in. All while learning a lot about the process of game design, the importance of script writing, and familiarizing myself javascript.

I'm looking forward to the rest of this journey and familiarizing myself more with the game dev community.

(+1)

Prompt 10: Sparkle

[html]


Today's vignette is about doing the dishes.

I tried and failed to add my cat following me for only a single room.

I was playing with items and interaction and it didn't go well because there's a glitch on the way to this room now and I GOTTA fix that.

I really like the stage I'm in right now. There's a story developing and I'm able to understand the writing that I'm doing better with every entry. And I have the added bonus of being able to jump through the different entries and edit the text and edit the dialog so easily. And I have a sense of what goes where and how the narrative will begin and end. I'm connecting these strings and understanding a flow and it rocks.

Hacks Used: Sean's Avatar by Room, Longer Dialog Textbox, and Transparent sprite hack via Borsky