Just read Signal Hill for the first time, and the story/mechanics are amazing... but I'm just in AWE at your UI. I've been working on my own custom UIs for my games, and it's been a massive effort for middling results (it's taken me six months!). But your game is just stunning, the aesthetics are amazing, and I love the options to edit the way the game works... Do you have any tips, tricks, templates, or resources you recommend/use?
Thank you so much, anon!
I'm not sure how much help I can be, unfortunately... my best tips are to have these three pages open while you work, start with brightly coloured boxes, and focus on movement and shapes before you get into the weeds. Here are some good templates I can vouch for to study and look over or use as a basis for your project: 1 2 3 4 5 6 (I'm pretty sure Signal Hill's project files started as a template from @manonamora-if so I could steal her very good working javascript??? LMAO)
On a very basic, mindset level, I'd say you need to have an idea and gun for it. I had a very clear concept of what Signal Hill was going to look like (and I still do, if I ever manage to get the 3D version off the ground), and I just went until I was able to accomplish that. You might have to desperately Google how to do something, peek through other websites' code (right click and select "inspect element"), or bash your head against a wall trying to fix problems, but as long as you have that solid concept to work from you'll get there.
If you haven't already, it might be worth getting out some graph paper and mapping out where you want everything and noting down how you want everything to function- don't worry about knowing how to do it, that can come later.
Also, set variables in your CSS root! Oh my god! I did not do this for so long until seeing other folks' CSS and feeling so stupid. It's so much easier to adjust things on the fly when you have a single value to change, and it allows you to dynamically change those variables to do things like dark mode or different fonts.
You're not gonna get it right on the first try. I don't know how many beta testers yelled at me to size up the TV. Lord knows I wanted a more complex animation on the menu. It's a process, and you'll get there.
I'm sorry if this question is out of place but I would really appreciate some help 😅
I'm actually trying to make a twine game right now and I have a few theme variations (default light mode, dark mode, etc). I want to change the color of the cycling text (like hair color options when pressed) to be different to match each theme. For some reason it's not working and it's driving me crazy, and googling it isn't helping 😭 it doesn't help that I'm a beginner at coding. Basically when I try to change the color in the CSS, nothing happens at all. I also want the text styles like strikethrough, emphasis, etc to work but that also isnt working on anything else except the default theme. I saw that your games have themes and the cycle text is a different color. Do you know how to get this to work?
I hope this isn't too much of an ask! Thank you for everything that you do and I look forward to playing more of your games! 🫶🏻💕
Oh excellent news my friend, I made a whole PDF about how I did it. I also have a 'code help' tag where I answer questions like this !! If the PDF doesn't help just lmk: I'd need to see the code (the Javascript meant to change it, the CSS values you're setting, and the passage code where you're letting the player interact) to be really helpful, but hopefully the PDF solves the problem !!
A while back, I somehow managed to copy the contents of one file and overwrite a different file, meaning the entire section of the map was lost for good. I had to reconstruct it from snippets of prose written in separate documents. It sucked. And that motivated me to try something that would stop that problem from ever happening- hosting my project on GitHub!
Git sounds really fancy and hard to understand, but it's really not! So I'm going to walk you through how to use it to back up your files and do much, much more.
This tutorial expects you to have an already set up Tweego folder and VSCode. If you don't know how to get that started, @manonamora-if has an excellent ready-to-use folder with an explanation of how to use it.
What is Git?
In short, git is a kind of version control. Say you're working on a coding project with somebody else, and you need to work on the same file they were working on. But how do you know you're working on the right version of that file? Maybe they forgot to send you the newest version. Or maybe you both have to make changes at the same time. It would take a lot of effort to manually splice together everybody's changes, let alone identify what each of you had changed. That's what git's job is. Git identifies what has changed about a file, notes those changes, and updates the "main" files to match. That way, everything stays consistent, and big files can be updated easily.
Okay, but what benefit does git provide to you, somebody who's just working on a solo project with very little code? Well for one, it would have completely fixed my problem. Instead of overwriting all of my work, git would have shown me that the file had been changed. Then, I could simply click a button to revert the change. Neat! It also means you can keep working on the same project from multiple locations without losing progress. Say you're working on your game on your home computer, but then you want to keep working on your school laptop. All you'd have to do is "push" your changes to save them to your master file, and then "pull" the changes when you get to school. Neat
The Basics of Git
Okay, but what does "push" and "pull" mean? Git's confusing, but the basic terms you'll be encountering don't have to be! Here's some terminology:
Git - This is the program that goes on your computer to manage your files. It does all of the version control.
GitHub/GitLab/BitBucket - These provide servers you can host your git repositories on.
Repositories - This is a fancy word for a folder that's being maintained by git. Every file in a repository is getting analyzed by git for changes.
Local vs Remote - Your local repository is the one hosted on your computer, and it's the one you're editing. The remote one is the one hosted on a site like GitHub.
Stage - When you stage a file, you're getting it ready to commit it.
Commit - A commit is like saving your progress as a new update. You can go back to a commit later if you messed something up.
Push - When you "push" your commits, git will look at your changes, go into the remote repository, and individually change all of those things in the "main" branch.
Pull - Just like pushing, when you pull, you're taking changes from the remote repository and updating your local one to match it.
Under the cut, I'll show you full step-by-step (with photos!) of how to set up your game with GitHub using VSCode!
Setting Up Git With VSCode
Lucky for you, VSCode has built in integration with GitHub, which means you don't have to download any new programs other than git itself. You'll just have to set it up. A note- I'm not sure at what point exactly in this process VSCode prompts you to install git, because I'm not going to install it on another computer just for this tutorial haha. VSCode will provide the installation, just go along with the default settings and you'll be fine.
So first, make a Github account. It's free!
Now, open VSCode. Here's our project! You're going to want to click on that third button down in the side menu, the Source Control tab.
Under source control, you'll see this option. Click it.
Aaaaand it's done! That was easy, right? Now your folder is a git repository. Crazy!
Before you can put all of this up in GitHub, you'll need to push all of your files. Type a brief message (try "Initializing" to feel like a real cool coder), press commit, and VSCode will ask if you want to skip staging and just commit everything. Yes! Yes you do!
Now that all of your "changes" have been committed, let's publish your new repository to GitHub. Click on the new button that says "publish branch." When the popup appears, click "Allow" to give VSCode access to your GitHub account and sign in. Back in VSCode, you'll see this:
You're probably going to want it to be private, otherwise anyone on the internet could see all of your writing! Which is cool if it's a public coding project that people might want to download and use for their own projects, but if you're not a fan of code diving, leave it private.
Using Git To Help You Write
Now that you've got your folder set up as a git repository, it'll change the way VSCode looks. VSCode is using git's info to know where you've made changes, and it'll represent those changes in the UI. Here's what those look like:
If you click on those lines, you'll get to see this fancy new panel that highlights all of your changes:
So let's say we have a scene, and we aren't happy with how it's looking, but we aren't sure if we want to make one change or a different change. Instead of backing up all of your stuff or copy and pasting it to test it, you can just make whatever change you want and click that backwards facing arrow to revert it back if you aren't happy with it. You can do the same for things like CSS- when you've made some good progress and want to save your changes, commit them. Then any more changes you make will be easy to revert back if they don't look right. Groovy!
Now that everything's set up, it's as easy as committing your changes when you're satisfied with them and pushing those commits to back up your work.
Pat yourself on the back! You just learned (the very basics of) how to use git! You absolute genius!
If you have any questions while following this tutorial, feel free to ask! My askbox is always open!
Why do websites only use a limited width for the important part of their content?
Facebook, Tumblr, Twitter, etc all have sidebars on both sides with the content in the center. I get that it's a popular way to do things, but when I'm trying to take screenshots or read without scrolling every few seconds, it's wildly inconvenient.
Is there a way to change the code on my blog so that it fills the screen/adapts to the screen size?
Every single site has so much wasted blank space; and when the window is made smaller than full screen, like when I have windows next to each other, the formatting is still fukt and often the actual content is the part that is sacrificed rather than the damn sidebars.
I know I can't fix other sites like facebook and twitter, but how can I get my personal tumblr blog to have an adaptable width?
When I try to put in an image for my background the preview looks fine,
The editor here looks fine,
But when I exit it doesn’t work.
I don’t know what im doing wrong or why this is happening but I need some help please. I’m fairly new to coding and website-making so a little insight would be wonderful. <:]
Hello. I love your AO3 theme. Well Done! I just have a quick question. I want to use it on my main side blog (@thenightwishsingers) so I tested it out on an old side blog (@hurricanerucas) but the theme won't show the scroll to to button. Idk what happened. Can you help?
hi! the scroll to top option in theme 11's settings is controlled by an enabled/disabled toggle, and should be enabled by default. however, due to a bug in the tumblr theme editor, when you first paste the theme code in and refresh settings, you'll need to turn it off and then back on to get it to actually display properly. (this also applies to any other toggle options- switch them off/on or on/off to get them to work properly.) i hope this helps!
