scriblinlife

wrote the best comeback readme ever!! i really hope you enjoy reading this

my final devlog (i guess)

after doing all the tiny fixes, such as the next button background or the speed of the stars and a lot of other small things.

i have done a complete revamp on the scriblinlife project, and i hope you enjoy it.

LINK: scriblinlife

I made something great, I made my comeback.

I recently shipped and I got extremely low rating which was kinda depressing. I didn’t let that stop me, the only thing that was going on my mind was to make a perfect comeback. I would say the feedback part was very great as it really helped me understand what i did wrong.

The changes:

• Two themes (depressing & chill)
• Stars animation for chill mode
• Chill music
• Button to change mode

and much more. I would like you to try scriblinlife!!

I made the tough decision and it turned out so well…

I did almost everything specified in the previous devlog. I have to say that this has got really fun to play.

Please add your messages (read the readme)

I felt my heart get heavier as I saw the bitter truth, I saw how heavy the decision I was about to make was. I knew it was going to be difficult but I had to do what was right.

Let’s not forget that the most important decisions are the difficult ones.

sigh

Let me give a brief overview of my pain.

I stripped almost all of the main features from the game, bcz I thought of taking this game to another direction. Steer it away from all the mess I had made…

I have removed:

• The scribbling feature itself
• The coat layer
• The moon
• The fireflies
  and a few more things.

What I plan to do:

A splash screen that asks you the theme:

• sad
• happy
• aurora

and it has a guide and start button.

You get taken to the page, but now instead of having a full coat layer. We will have a thin foil coat layer that will sit above our text and then people can erase it to reveal the message.

I will still encourage people to add their messages through the repo bcz I really want to increase the github contributors on the repo. It looks badass, believe me.

i finally stopped using my css shortcut to add my cursor.

I added a html based cursor, and it is pretty simple and it just renders the image while i added the css to hide the default cursor.

after that I had to also fix the rendering it on both the splash screen and the canvas. i did that by adding operators and on the top we had our cursor.

this actually took a while bcz there were a lot of bugs spawning from nowhere bcz of this stupid cursor

well, actually i was trying to make the canvas more responsive. and i messed everything up. i created a system that would automatically downscale the canvas size according to the screen size. i actually just tried to divide the availble width - the padding with the default width. IT WORKED. not exactly the way, i wanted, but it looks way better.

Sounds like stupid rocket science, but it was a failure. Now I am going to clean up my code. also i am debugging on why my custom cursor won’t show on the live website but will show on the

Woooohooo! Almost done with v1 of scribblinlife…

So I just set a timeout so users can’ scribble endlessly, also added a cool eraser cursor to the game. Fixed the dropdown array errors, and also fixed the go blank errors ( once the position of the mouse was set to null the entire would go blank/crash ).

TRY IT NOW!

Please read the readme and plz plz add your own messages

github repo

I also reset my laptop and now nothing looks the way it used too 😥

i just wrote the readme, just fyi, i don’t write much.

I just styled the dropdown functionality and got everything to look neat and nice.

I just completed the dropdown functionality, which means we can have more scribbls… YAY!

So what I mean is now you could go to my repo and add your own scribbl and then it would show up in the dropdown and anybody could select and play it.

Also writing a readme is really painful.

tada, i was guessing this was going to be my final devlog, I added the splash screen. I know the game already feels quite meaningful. I am always looking forward at people actually connecting with my builds, there is no better way for people to connect with my game, then allowing them to add their own scribbl (messages). I am now creating a dropdown and people can send me a list of messages they want to add on the website. If someone clicks on their scribbl in the dropdown, it loads and VOILA! The player can now read your messages.

Should I add a google form or what? I mean for collecting peoples responses!

I set up fireflies woohoo. More personality for the game. I also resized the canvas so the fireflies would have more space to fly. I used a little bit of AI to help me with the calculations and math.

I added a cool moon to the game.

The moon is there bcz the platform was pretty blank and I wanted to give it more life.

I also set this up with Konva. I added a gradient and glow animation to stop it from looking like a stupid circle in the corner.

I think it gives personality to the game, let me know your thoughts.

Set up the music and scribbling sound.

I used the Tone.js library to make the scribbling sound. I used the sound “white” + the filter “highpass”. After adjusting the values and sounds for a while, I got something pretty satisfying.

I found a sound on incompetech.com in the classical category called Relent. I set up Tone.js to play the sound too but bcz I use IDM alot. IDM was interfering with my application which caused me to switch to the plain audio tag.

I also learnt:
You can’t play audios without a user gesture

Instructions:
Keep scribblin’ until you see a message, once you have scribbled a message you will be allowed to move forward with an arrow at the right bottom corner.

Try it out at scriblinlife.vercel.app.

I recently worked on a game for the jame gam, called Diaper Baby.

So now I am making another more meaningful game, you scribble the canvas to reveal messages and then once you have revealed it you can move on.

This is the MVP, so you will probably find workarounds in the game.

How the game works:
I used React-konva (a library that lets you set a canvas). I set two layers, one was of text and one was of the coat layer. The coat layer stays above the text and you have the eraser tool set up, and when you erase the coat layer it reveals the message.

Once the message is partially or fully revealed, the arrow is shown.