GMEdit

A high-end code editor for all things GameMaker · By YellowAfterlife

Add to collection

tool Community Devlog

GMEdit community

Theme and Font Tutorial

A topic by Gypsy created Dec 30, 2021 Views: 792 Replies: 6

Viewing posts 1 to 2

Gypsy2 years ago (3 edits)

The editor is really a joy to work with, I do wish there was a short tutorial on your YouTube channel to show how to import fonts and change the theme to match our own version of GameMaker's text colors, fonts, and skin to ease transition into it.

Edit: I've been trying to edit my theme.css file to change the font, but to no avail.

#main.ace_content {

font-family:'Final Fantasy 3/6 Font';

font-weight: bold;

}

I also tried font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; but that didn't work either

Also, how can I change the color of the background? It's either dark of light (white), and what I'm basically trying to do is to get it to have the same tint as the latest version of GMS2.3 (its a bit grey at #f2f2f2), but I can't figure out which #main.ace-tm command does that.

Is there a documentation to refer for all the #main lines that I can use to edit the text to my liking?

Thank you for your time, YAL.

Edit: to anyone struggling with the font change, it doesn't work with anything that is not monospace from what I can tell. I was able to change it into some weird fonts as long as they are evenly spaces, but anything else won't work. Hope this helps. Now I just need to figure out the background change color code.

YellowAfterlifeDeveloper2 years ago (2 edits) (+1)

Presence of spaces matters in CSS selectors, #main .ace_content means “an element with class containing ace_content inside an element with id of main”. #main.ace_content means “an element with class containing ace_content and id of main”. Generally, copying the selector as-is from the Elements tab is a good bet; you can try

document.querySelectorAll(`#main .ace_content`)

in Console to see what elements match your selector. (also see Finding what to style)

I don’t think I have it in me to do more YouTube tutorials at the moment - the fact that you can’t edit them after upload has it that either the video is going to be longer than it should be, or that a few-minute video takes several hours to plan, [re-]record, and write subtitles for. I’d like to experiment with more ways to handle step-by-step demonstrations in text tutorials though.

Gypsy2 years ago (2 edits)

Jesus Canadian Christ! It finally worked for the backgrounds!!!

Okay, so after doing what you told me, I got it to work but it wouldn't save and would reset when I closed it, so I just opened the Sources tab after changing the colors and copying the code and pasting it into the .css file and it worked.

document.querySelectorAll(`#main .ace_content`)

was helpful with editing the program colors (body, header, scroll bar, etc.), but I can't seem to find results that point me towards editing local variables, strings, functions, and so on. Any further step (or different one) you can give me? I'm finally so close to the finish line with this!

Edit: I forgot to mention, I typed aceEditor.debugShowToken() in the Console tab and it didn't yield any results for me (says undefined).

Thanks YAL, this was really helpful. I understand YT vids are a hassle to make, so I would highly encourage you to make a text based tutorial with GIFs whenever your busy schedule allows it, as a lot of people would get overwhelmed in this easily. After a few weeks I'm still not done editing the whole layout on my end.

YellowAfterlifeDeveloper2 years ago

aceEditor.debugShowToken() isn’t supposed to return anything, but after calling it you can mouseover things in code editor and it’ll show what they are in status bar. Calling it again toggles it back off.

Selectors for code editor elements are commonly like #main .ace-tm .ace_local (when type is shown as “local”)

Gypsy2 years ago

Done! I've been able to change almost every thing to resemble its GMS2.3 counterpart. This topic is considered solved. Thank you so much for your patience, YAL!

Which brings me to the last one; since 2.3 came out, we now have our scripts and our functions being colored differently. Essentially, our custom made functions are colored as the built in functions, whereas the script is its own color. Is there a way to do that in GMEdit as well, or is that too much of a hassle to recode that one color change that came in the new version of 2.3?

And this has nothing to do with the topic at hand, but how do I use GMLive with GMEdit? Is there a link you could direct me to so I can dabble with it? Using the switch to GMLive.js prevents me from accessing Edit, so I'm not sure if that's it because I can't access any of my code.

Thanks for the help, YAL!

YellowAfterlifeDeveloper2 years ago

The IDE’s new highlighting behaviour is a little misleading, isn’t it? After all, a script commonly contains a function of the same name, but it is not highlighted so. I try to not touch highlighting too much since doing so can break themes/plugins that expected original class/token names.

GMLive.js is different from GMLive.gml - it’s for testing little snippets of GML without creating a project.

GMLive.gml integration is mostly akin to using it in regular IDE, but you get little badges indicating that there’s “live” code in files.

Gypsy2 years ago (1 edit)

- Yeah, I'm gonna have to agree, it actually makes things a bit more confusing now that my own functions match the colors of the built in ones without a way of editing them. I was lucky enough that I changed my coding style to camelCase specifically to make sure my code is differently written from GML to make things easier to spot for this project.

- Gotcha! Not the same thing.

- So THAT's what those are! I was VERY curious why suddenly half the objects in the game got orange dots on them all of a sudden. That's a pretty awesome touch, I must say.

Quick question; does having the if (live_call()) return live_result; line in create and step and draw at the same time cause any issues to an object updating code on the fly? My character gladly updates my code in the draw event, but has recently not been updating on the fly in the step event when I change simple variables such as the jump variable. Could it be that I have the code written in a script and placed in the step event?

itch.io

GMEdit

Theme and Font Tutorial