Blog update + tutorial ☕️ (Patreon)

Edit: It seems that Patreon removed most of the images in this post? Um...I tried to add them back, so let's see if they stick this time <u<

Hey everyone, today I thought I'd publish something a little different. I'm still working on the script for Chapter 5 of Succubus Simulator and so, as usual, I am procrastinating.

I spent a few hours updating my blog, and now it looks like this:

It's not quite done yet, but the main thing I wanted to try out was seeing if I could make parts of an image seamlessly interactable. Yes, all the buttons are hover-able & clickable! Try it out on the blog.

I apologize if there are mistakes in the following sections; I'm a little bit tipsy.

Tutorial

As some of you may know, my websites are mostly just made with HTML, CSS, and janky JavaScript, and they're hosted on Netlify (Netlify is cool when you're starting out because you can host your websites for free and can also buy domain names and stuff from them when you reach that point. Not sponsored, of course, lmao). Anyone can learn how to make websites! If you want to get started, check out this tutorial by W3Schools.

Now, I wanted to make a tutorial more specifically on how to make elements in an image interactable (is that a word?), since that seems to be less written about.

Basically, the steps are as follows:

1. Make the art, make sure the parts you want to be interactable are on their own layers. I made my art in Aseprite, but you can make the art in almost any art program. Export each layer separately with transparency if applicable.

2. Import the art into Sketch or another application that can export SVGs. SVGs are so cool. I love SVGs, they're basically magic. Make sure all the layers are imported separately into an art board (or group, I suppose). Label these layers; this is important because what the layers are named is what their id attribute will be in the HTML code. You can see below in the left menu that I have imported and labeled each link button (like "Reddit" for example) separately since I want users to be able to click on them. Export the art board as an SVG.

IMPORTANT: Make sure to put the stuff you want users to interact with on top of all the other layers and to crop them as much as possible. This is because if elements overlap, the bottom element(s) won't be able to be interacted with, even if they are only being overlapped by transparent pixels. I learned this the hard way.

3. Open the exported SVG in a code editor. I personally use Visual Studio Code, but any editor will do. You will be met with a bunch of shit.

The shit:

Copy all this shit and put it in your website. The reason why it looks like gibberish is because images are encoded in SVGs and that's what encoded images look like. It's actually really cool when you think about it: an image can be represented by a series of letters and symbols and numbers... fucking magic. Anyway, there are ways to make this look nicer, but it's too complex to talk about here. For now, we will just deal with all the text.

If you look at your website (either hosted or locally), you should now see the SVG image. If you search your HTML code for one of the names of your layers (for me, I'll use "Rss"), you should be able to find it.

If so, cool! Now you can alter the elements using their ids in Javascript and CSS :D

For instance, if I wanted to change the opacity of the RSS element, I could just put this in my CSS file:

Easy!

4. An example of engaging with an element could be, like, when an element is clicked, do something. For instance, when the RSS button is clicked on my website, I want the RSS page to come up in a new tab. To do this, I would do the following:

After id="Rss", add onclick="OpenRss()" or whatever your title is. Basically, onclick says hey, if this element is clicked by a user (by mouse or finger) then run this function called OpenRss. Now we just need to create the function.

That's as simple as putting the below code in a script tag at the bottom of your HTML page:

Replace the name of the function and link as needed. "_blank" means that the website will open in a new tab. To open it in the same tab, use "_self" instead.

5. Example #2
I also wrote some code to change the color of the sky behind my character sprite depending on the time of day. It's as easy as putting this code in the script tag at the bottom of my HTML page:

bg1, bg2, and bg3 are each a different sky color (I exported them as separate layers), and I basically just set them invisible or visible (using the opacity attribute) depending on the time of day.

6. This isn't an example so much as it is a tip!

Did you know that SVGs can contain gifs? They can, despite what barren google search results might lead you to believe. And it's also really easy to do. When you put a gif into Sketch, it basically turns it into a still image, and so when you export it, the image won't move. This is fine! Just put your gif into this website, copy the base64 code, and then replace the element's base64 code in your HTML code. Replace the string of stuff AFTER data:image/png;base64,
Make sure it's after the comma.

Alright, well, I hope this helped someone! This is really just scraping the surface of what you can do with this. You could do all this without using an SVG too, but I just found this way to be the easiest. Also, I just find this kind of stuff fascinating and maybe someone else does too :D If nothing else, I can look back to this whenever I forget how to do it, lol 🌥️