Logic World - Jimmy
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!

Jimmy

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.


Felipe (aka pipe01)

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.
Logic World - Jimmy
Hello and welcome back to Logic World Wednesdays!

Jimmy

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.


Felipe (aka pipe01)

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<Logic_World.Models.Post> { 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.
Logic World - Jimmy
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.

Jimmy

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.

Felipe (aka pipe01)

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/
...