Logic World News

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.

Welcome to the very first Logic World Wednesday! Each week, we will be sharing our progress on Logic World. This blog is going to be a mix of technical and non-technical discussion.



This week I added a feature I call multi-wire placing. In Logic World you create wires by clicking on two pegs to connect them. Often, however, you need to create many wires going in the same direction; think data busses. This can become tedious very easily.

One of our goals with Logic World is to make building as non-tedious as possible. That’s where multi-wire placing comes in. With MWP, you select two groups of pegs, and connections are created between the groups in the order you selected them.

This is kind of difficult to explain with text, so here’s a video showcasing the mechanic:

https://www.youtube.com/watch?v=6P6E4Sj5qMs

I also added Exclusive Inputs. Normally, inputs in Logic World can both receive and propagate signal. But this can be undesirable; if you have several wires feeding into an input, you might not want signal to travel between them.

Every input in Logic World can now be toggled between exclusive and non-exclusive mode. In exclusive mode, inputs can only receive signal - they cannot propagate it. This allows you to make complex circuits very space-efficient, since you no longer need to build special gates where you only want the signal to go one way.

https://www.youtube.com/watch?v=03dJFo5qYQw

If you’ve been following Logic World for a long time, you might remember me talking about Multi-Wire Placing and Exclusive Inputs in the past. I had both of these features working in October of last year. In November, however, we scrapped almost all of the code we’d already written for LW. The game was rebuilt from the ground up in a completely different way which is much more performant and which allows for multiplayer. So this week I re-implemented multi-wires and exclusive inputs under the new system.

Finally, I’ve been working on a longer form video that shows off the performance of the game. It’s called “Counting to a Billion in Binary” - look out for that later this week.



I’d like to introduce you into some concepts of the modding system. For the first ever edition of LWW, I’ll give you a quick overview of how the modding system works and how it doesn’t. First of all, mods can contain both code (component logic, like what a component should do when one of its inputs gets turned on) and other assets (how a component looks like, etc). Inside the code part of the mod there is another separation: server and client code. Server code handles the aforementioned component logic, while client code controls how the component looks to the camera (Should it change color? Should it grow legs?). These two parts can also share some simple data structures, for example to store how many legs it has.

On a more technical remark for those of you that “do the code”, this data is represented as a POCO (Plain Old CLR Object) in both the client and the server, which means that the synchronization of this data between both sides is completely transparent to the modder, making it extremely easy to add custom states to components. Components declare their data through a C# interface, which gets implemented at runtime using a handy library I wrote specifically for this called ClassImpl.

Separate from the code and inside of the previously mentioned mod assets are the component definitions, contained in a SUCC file in the mod package. This format is the exact same one we use for the stock game components (like the inverter), so you can be sure that you’ll be able to do everything the existing components already do, and even more! Here you’ll define the shape of a component and the code behind them, as well as how many inputs and outputs it has and where they are positioned. This gives you flexibility to create cool and odd-looking components with as many inputs and outputs as you want and that behave exactly the way you want them to.
For example, here’s the SUCC section for a regular inverter:

Tung.Inverter:
    column: "Logic"
    prefab:
        blocks:
            - Standard
        inputs:
            -
                position: (0, 1, 0)
        outputs:
            -
                position: (0, 0.5, 0.5)
                rotation: (90, 0, 0)
                startOn: true
        logicCode: Tung.LogicCode.Inverter
    placingRules:
        GridPlacingDimensions: (1, 2)

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

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. Read more Logic World Wednesdays

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