Logic World News

One problem of releasing Logic World on multiple platforms is not having a way to easily connect with your friends that have bought the game on a different shop. Thus, I set on to build a friends system, akin to that of steam (although much more barebones). This means that you’ll be able to chat with your friends and join their games, no matter where they got their copy of the game from, be it Steam, Itch.io or Gamejolt!

The system is powered by a gRPC server running on the cloud, to which clients will connect to in order to send and receive messages in real time. This whole system is completely opt-in, meaning that we won’t bother you at all if you choose not to create an account.



To access the friends system, we must verify that you’ve successfully bought the game, which you can prove through your linked Steam account or by authenticating on itch.io. You only have to do this once, and you’ll be able to add your friends!



A number of components in Logic World have parts on both sides of circuit boards. This week I’ve added a building mechanic that lets you flip these components upside down, either before or after you place them.

https://www.youtube.com/watch?v=KnnBNeEzD5I



In Logic World, the client and the server use the same code to store their internal physical models of the world, and this model is synchronized between the server and all the clients that are connected to it. Previously, only the server had access to the code that generates save files from this model of the world. I’ve modified the save code to work without the server, only that shared physical model of the world. This means that when you’re connected to a server, you now have the ability to download that server’s world.



Logic World has two methods of saving your progress. First, it will save your game to the current save file. Second, it will automatically backup your save file, just in case. This week I’ve been working on making these two systems more configurable, and you now have the following options:

• automatically save when the game is closed (true/false)
• enable/disable autosave
• time interval between autosaves
• enable/disable auto-backups
• time interval between auto-backups
• an option to make a backup every time the game is saved (this would be in addition to auto-backups if you have them enabled)
• the location on disk which backups are saved to
• the maximum number of backups to keep per-save before the oldest one is deleted

Currently, if you want to upload an image to a post on the forum you’d have to previously upload it to an image uploading site (we were using Imgur), and then insert the image using Markdown notation. However, now you can directly upload images to logicworld.net and insert them into your post by writing {{!N}}, where N is the index of the image you’re referencing. Here’s how the UI looks like at the moment:



I do want to make it prettier but this works for now, even if it’s not the best UI.



Last week @woox2k left a comment suggesting a keyboard shortcut for the search function in the selection menu, and this week I’ve added it. When you run a search, you can now press enter to add the first search result to the end of your hotbar. It also selects the entire search box so you can immediately begin searching for another item without having to use backspace. There are a few more advanced shortcuts as well:

• alt+enter will add the item to the beginning of the hotbar instead of the end
• shift+enter will replace the currently selected hotbar slot with the item
• ctrl+enter will insert the item into your hotbar right after the currently selected hotbar slot

I’ve found that these become muscle memory quite quickly, and they allow experienced players to edit their hotbar without ever using the mouse.

---------------------------------------------

If you’d like to receive an email each time we post one of these blogs, you can sign up for our newsletter. Be sure also to join the official Discord and follow @LogicWorldGame on twitter.

See you next Wednesday!

View this post on logicworld.net.

https://store.steampowered.com/app/1054340/Logic_World/

Welcome to another Logic World Wednesday! This week, Jimmy works on the UI system for the game, and Felipe continues to add features to logicworld.net.

We’re trying out a new format this week: rather than giving each developer their own section, the post is divided into sub-topics, each with a developer’s name attached.



I spent this week going over all our UI code, adding features, fixing bugs, and reworking everything to be more flexible/modular. The goal is to establish a set of tools that help us build functional and beautiful menus very quickly. This isn’t quite done, but it’s close.



Logic World will be localized into several different languages. This week I’ve made some improvements to the system that allows the game to switch languages.



Firstly, mods can now use the localization system. Mods can now add translations for any text they add. Mods can even add entire new languages!

Next, I added a language fallback system. This allows localized text to revert to a different language if a translation is not found in the preferred language. For example, say you’re a native Spanish speaker but you know some English. You have the game language set to Spanish. However, you’ve installed a mod which only has translations for English and Portuguese. Without language fallback, all the text from that mod would say “missing localization” - but if you assign English as a fallback, that mod will be in English even while the rest of the game is in Spanish.

If you’re fluent in a non-English language and you’d like to help translate Logic World, please send us an email at [email protected]. Translators will get their name in the game credits!



Last week I was crunching numbers and I discovered that more people are visiting Facebook than logicworld.net. While investigating, I found that we were missing a like button! This shall be no longer; there is a button with a heart in it at the end of this post on logicworld.net, make sure you try it out!



As you may have noticed on the last LWW, comments weren’t working properly. Specifically, you weren’t able to reply to 1-level deep comments. I haven’t yet found the change that introduced this bug, but I suspect it’s related to a merge in posts and work items (more on work items later 😉). Whatever the cause, I’m sorry for breaking conversations in the last LWW. To make up for this, make sure you give us your thoughts this week!



Some people were affected by a bug where you wouldn’t get an email notification when someone replied to one of your comments. This was caused by a user preference that I added in the back-end but ended up not adding to the settings page itself. Thus, the default value was to not get any notifications! This has now been changed to always receive notifications, but expect an option in your account settings in the future.



Not much to say here, now you can delete any comment you have posted. This will be accompanied by comment editing in the near future, so look forward to that.



It’s useful to be able to refer someone to a specific comment, which is why this week I added comment permalinks that look like https://logicworld.net/Forum/Comment/18. You can get this link for any comment either through the comment’s date text or the dropdown options menu.



All the menus in Logic World uses a consistent selection of colors. This week I’ve been working on a system that lets you easily modify that selection.



Now, when I add something to a menu, I don’t choose a color for it, I choose a part of the palette for it. That menu element (a block of color, a scrollbar, some text, ect) is then assigned a color based on the current palette.

Originally I was doing this to save myself time; if I want to slightly change the shade of one of the colors, I now only need to do it in one place rather than adjusting the shade in every individual UI element that uses that color. But then I realized that this system could be used to support multiple different UI themes, and so that’s exactly what we’re doing. Logic World will ship with a few different menu palettes, and mods can add additional palettes. You’ll be able to personalize Logic World’s menu colors to look exactly how you want them to!



If you’ve ever shared a link on Discord or Reddit you may have noticed that they have an image attached to it. This image didn’t show up on any logicworld.net links as I had overlooked it, but now there’s a pretty logo! I plan on customizing the image for each page, for example showing the first image found if the link belongs to a post.

Before:



After:





Last week I showed the search system in the selection menu. By default, when you close and re-open the selection menu, the search box is cleared. This is convenient because it lets you search for something, grab it, close the menu, and have everything back to normal when you open the menu again. However, you might not always want this to happen. For example, maybe you’re using search to narrow down the displayed components to a particular subset which you want to return to later.

I’ve added a Lock toggle to the search box. While Lock is on, the search box isn’t cleared each time the menu opens.





Perhaps most importantly of all, we now have a database backup system that runs periodically. Right now this includes all user data, as well as posts and comments. In the future though, you will be able to share worlds, boards and mods, which will also be included in the automatic backups.

All websites come to an end eventually, and ours will probably be no different. When that happens, we pledge to release all of this data as a torrent for all of you to download and preserve this bit of history!

-----------------------------------------------------------------

Thank you to the following people for translating the selection menu for this post:

• Polish: @Qik
• Estonian: @woox2k
• German: @JuliaEllie
• French: @Nano

If you’d like to receive an email each time we post one of these blogs, you can sign up for our newsletter. Be sure also to join the official Discord and follow @LogicWorldGame on twitter.

See you next Wednesday!

View this post on logicworld.net.

https://store.steampowered.com/app/1054340/Logic_World/

UI work

This week I did the first serious work on menu design for Logic World. I overhauled the Selection Menu, which you use to select the components that appear on your hotbar.

Before:


After:


I’m pretty happy with the overall design elements: rounded rectangles, mostly in neutral tones with some splashes of color for highlights. I’m using the selection menu as a study to figure out what I want the rest of the game’s menus to look like.

On the subject of the selection menu, I added the ability to search it. This can be really useful if you’ve got a lot of mods installed.

https://www.youtube.com/watch?v=YPIohAjnDFM

Pick Component

I added a new shortcut for managing your hotbar called Pick Component. Middle clicking on a component in the world will add that component to your hotbar if it’s not already there and select it.

https://www.youtube.com/watch?v=Y1BEQJxTx5s

Not shown in the video is two more advanced features of Pick Component. If you hold ctrl when you press the button, the picked component will replace the component in your currently selected hotbar slot, rather than adding a new one. Conversely, if you hold shift, the picked component will be inserted at the position of the currently selected hotbar slot, rather than being inserted at the end of the hotbar.

Rounding

In Logic World, the position and rotation of objects in the world are stored as floating point numbers. This makes them very performant, but floating point numbers have a disadvantage: they are subject to rounding. If you’re a programmer and you’ve worked with floats before you’ve probably seen them have a value of 0.99999823 when they should just have a value of 1.

This tiny amount of rounding is usually no big deal, but in logic world the errors were accumulating over time. Particularly in worlds where you have deeply nested chains of boards placed on other boards, the position of objects could sometimes be off by a noticeable amount.



Notice how the inverter in this picture is slightly offset from the grid.

To fix this, I’m now rounding the position and rotation of every object in the game: positions are rounded to the nearest millimeter (along all 3 axes) and rotations are rounded to the nearest tenth of a degree (again along all 3 axes). This extra rounding is too small to be seen in-game unless you’re looking closely, but it’s big enough that it cancels out any errors we get from floating point shenanigans. Everything in Logic World is now exactly where it should be.

Numeric Component Types

Each component in Logic World has a type. There are Inverters, Delayers, and XOR gates, to name a few. Before this week, component types were stored internally as pieces of text. That meant that, depending on the length of the type name, component types could take up 15 or even 20 bytes!

Now, however, I’ve refactored the system so that component types are all stored as two-byte numbers. Each save file has a unique relationship between component types and the numbers. For example, the number 18 might represent an XOR gate on one save file, but it might represent an inverter on another save file. This means that mod authors don’t have to make sure they’re not using the same number as another mod when they add a component type; the game will automatically give them a number that is not already in use by the save file.

As a result of this, save file size - and by extension, the time it takes to save and load the game - has been reduced by about 20%. The amount of bandwidth used when playing online has been similarly reduced.

Board Resizing Bug Fixes

If you watched the previous two videos on Board Resizing, you probably noticed that there was an annoying visual flicker whenever the board was resized. I’ve fixed that and board resizing is nice and smooth now.

Previously, if you resized a board that had components attached to it, the position of those components would get screwed up. This is because behind the scenes, resized boards are changing their position, and the attached components were not properly taking this into account. I’ve fixed the math and it all works nicely now.




This week I wanted to polish out some things that I had left out on the website, those being emojis not rendering correctly and user pages not working. Whenever you inserted an emoji into a comment or a post it’d show a

?

instead, which made me think that there was some encoding issues. I began investigating the database and found that they were being stored as question marks there, so the problem was in the database. I set the collation for all tables to

utf8mb4_general_ci

and tried again, and emojis were working properly now! I also fixed user pages requiring you to be logged in in order to see them, it was an easy fix.


On the game side, I’ve implemented synchronous RPC calls. Before this, whenever a mod called an RPC method it would be a fire-and-forget situation, where the mod had no way to know whether or not the server had received and processed the call. This is probably enough for most things, but there may be some cases where this is undesirable. Synchronous means that the mod code will now wait for the server to send back an acknowledgement before continuing execution, which allows for more complex synchronization between clients and server!


On the topic of waiting, I’ve added a loading screen for mods. Mods were being loaded in the main thread, which meant that the screen wouldn’t update until all mods were loaded. This worked fine, but it didn’t allow for any graphics in the meantime. Now, mods are loaded in a separate thread, allowing the game to monitor the loading and inform the user!

---------

If you’d like to receive an email each time we post one of these blogs, you can sign up for our newsletter. Be sure also to wishlist Logic World on Steam, join the official Discord and follow @LogicWorldGame on twitter.


See you next Wednesday!

View this post on logicworld.net.

https://store.steampowered.com/app/1054340/Logic_World/

Welcome back to Logic World Wednesdays! Before we begin, we’d like to share an exciting milestone with you: a few days ago, Logic World passed 1,000 wishlists on Steam. Thank you - all 1,000+ of you - so much for your support!



I started off this week by polishing the Board Resizing mechanic I showed off last week. If you’re not familiar, the main construction element you use in Logic World is circuit boards. Board Resizing allows you to edit the size and shape of boards that have already been placed in the world, which makes building stuff a much smoother experience. Here are the improvements I made this week:

• added diagonal arrows
  • holding shift while resizing diagonally snaps the shape to a square
• added checks to prevent resizing the board into an invalid position
  • board arrows will be disabled if you cannot resize at all in that direction
• redesigned arrow appearance
• you can now see and interact with the arrows if they’re occluded by something
• you can now click any part of the arrow and it works correctly
• some arrows now smoothly animate into position rather than snapping

And here’s a video showcasing those improvements:

https://www.youtube.com/watch?v=Iq5nftvaYTM

Next, I’ve started work on a set of advanced text rendering assets for the game. If you’re not a native English speaker, you’ve probably at some point typed a character from your language into a game and seen it replaced by a square because the game doesn’t know what that character looks like.



I want that to never happen with Logic World, so I’ve started a project called EveryGlyph which aims to render, well, every glyph.





EveryGlyph uses Google's Noto project for glyph geometry. Noto is a set of fonts for every language that are all consistently styled with each other. It’s a really cool project and I’m quite grateful that Google lets everyone use it for free.

To actually render those fonts, EG uses Signed Distance Field - or SDF - Text Rendering. This is a technique developed at Valve for Team Fortress 2. SDF makes the glyphs look smooth no matter what size they are.



EveryGlyph will be used in Logic World to render text on labels, in the game’s menus, and in the game chat, which will let you send messages to other players on the same server. No matter what language you speak - or what unconventional emoticons you like to use - all your characters will display properly.

Next week I’m going to add emoji support to EveryGlyph. An inside source told me that kids these days like emojis, and this is my plan to make Logic World appealing to them.




As you may remember from the first LWW, mods are divided in client and server side parts. This means that some code is running on the server while some other code runs on the client. RPC (Remote Procedure Call) is a form of Inter-Process Communication that allows the server to call a method on the client, and vice versa. This is accomplished in LW by using my ClassImpl library, allowing the component on the client to not even know what RPC is and still be able to communicate with the component on the server.

This week I’ve been working on greatly optimising the performance of the creating of RPC client/server instances. I’ve managed to improve times by a factor of 10! This is really important because every component which contains custom data uses an RPC instance. By drastically improving the performance of creating those instances, I've also drastically improved the loading times for large worlds.

--------

If you’d like to receive an email each time we post one of these blogs, you can sign up for our newsletter. Be sure also to join the official Discord and follow @LogicWorldGame on twitter.

See you next Wednesday!

View this post on logicworld.net.

Hello and welcome back to Logic World Wednesdays!



Due to some personal life events I took a break from working on Logic World. This is why there wasn’t a blog post last week and why today’s post is a day late. I am back at it now, though, and I’m excited to keep improving this game.

I’ve been working on a feature that I’ve wanted to work on for a very long time: Board Resizing. All the structure in Logic World is made up of circuit boards. They are the base upon which you build circuitry. And now you can change their size after you’ve placed them, using lovely world-space UI.

https://www.youtube.com/watch?v=OqeBxbnxRto

I’ve also spent a good deal of time tracking down a particularly elusive and annoying bug. I still do not know the bug’s cause and solution, but hopefully next week I will have figured it out and I can give you a detailed writeup about it.




This week I’d like to talk about the logicworld.net website itself. I’m afraid I’m going to use technical jargon this time, but I enjoy when I get to know how things work deep down so I’d like to give you that sort of experience.


The website was at first written using ASP.NET Core for the backend and jQuery for the frontend, however this stack was quickly running short of space to expand (mostly due to jQuery) so I decided to make the switch to using the same backend tech but with Vue (and TypeScript and Webpack and all of that) for the frontend. This allowed much quicker iterations (although ironically the Webpack build times took much longer) and, most importantly, more reusability and modularity through the use of Vue single-file components. This meant that new features could be added to the site without giving much thought to how it affected the rest of the pages.


In order to connect the backend and frontend though, I’m using a Visual Studio 2017 extension called TypeWriter. This extension allows you to write TypeScript templates in .tst files that transform C# classes into TypeScript files. This is absolutely amazing since now I only need to write C# code, which will get transformed into the TS code I need in order to use it from the client-side. Currently, ASP.NET Core API controllers are being transformed into TS files that use the axios library in order to send a request to the server. This is an example of a generated endpoint:

import http from "axios"
export async function postPost(model: Logic_World.Models.ViewModels.NewPostViewModel, id: number) : Promise {    return (await http({        method: 'post',        url: "/api/forum/{id}/post".replace("{id}", String(id)),        data: model,        params: null    })).data;
}

This has been generated from the following controller method:

[HttpPost("/api/forum/{id}/post")]
[Model(typeof(Post))] //This indicates what type of object the endpoint returns on success
public IActionResult PostPost([FromBody]NewPostViewModel model, [FromRoute]long id)
{
    ...
}

I’m also using this technique in order to create simple TS models from C# classes, as you can see with the Post and NewPostViewModel types.

All of this means I no longer have to worry about writing bridge code between the back and the front end, and instead it’s all generated for me as soon as I hit Control+S.

Although, this has one big drawback: you must use Visual Studio 2017. It would probably be a much better experience if it was integrated into the .NET build process, but alas it’s a VS2017 extension which means that you must have it open in order to apply any changes you’ve made. I would still 100% recommend this extension if you’re working on anything related to this; it doesn’t even have to be web-related.

So, I hope you were able to follow through. I promise next week it will be more interesting and less tech-loaded.


If you’d like to receive an email each time we post one of these blogs, you can sign up for our newsletter. Be sure also to join the official Discord and follow @LogicWorldGame on twitter.


See you next Wednesday!

View this post on logicworld.net.