Instead of Rendering everything at once

4 min read
03 October 2022


Pistoncraft is a term used to describe an actual time strategy/logic puzzle video game. I've been thinking about this for a long time and then I decided to implement it twice, but it's too difficult to implement and might not be as enjoyable as I had initially thought. The first attempt has been the most successful to date. It is written in Javascript and heavily on a lot of CSS transitions.



Pistoncraft attempt 1



1 Original idea



The idea was initially inspired by the Pistons mod that is included in the video game Minecraft. The Pistons mod has since been incorporated into Minecraft's official version. Minecraft. I realized early on the potential gameplay for pistons I was thinking about how to make it easy and fun.



I decided to go with the top-down 2D game where one builds a factory using pistons that manipulate raw materials to create intricate things. Because it's 2D it is a lot different from Minecraft and Minecraft, but I also adapted the concept of creating circuits and railway systems. SpaceChem is similar to SpaceChem in that it allows you to create an autonomous system for assembling objects. Mcname I also thought about the goal of creating an autonomous manufacturing facility.



- To design and create objects to create an objective that is not arbitrary like SpaceChem. - To create a static defense to defeat waves of enemies, i.e. a tower defense game.


- To develop autonomous fighting robots to defeat an AI opponent or human opponent. a real time strategy.


2 Refined concept



To pitch the idea to my friends, I made an infographic of a huge size that explained the game mechanics, as well as the properties of the game's entities and then further developed the concept of manufacturing robots in a real-time strategy game.



3 First implementation attempt



The infographic below illustrates the first attempt at implementation. I made it pretty far - the pistons pulled things as desired and the wires connected things according to what was desired; the molds changed the items as desired and the resource block made items as desired.



The gas items that were put into a square mold turned into engines. When they were pushed through the circular molds they became warheads. When they were pushed through the bullet mold, they changed into rocket fuel.



I gave up on execution of this plan because:



- CSS transitions were slow because numerous DOM elements were required to create animations.


The animations weren't great.


The code was messy.


- The user could not deal with multiple layers of stuff such as wires that go beneath objects.


4 Second implementation attempt



The second attempt at implementation was more organized from the beginning. The most notable improvement was the use of version control (the project was hosted on GitHub). Although it used essentially the same idea of CSS transitions however, the code was simpler and had the stylesheets split into multiple modular CSS files.



The visual design was also improved: the user interface became a more familiar control panel, similar to that found on real time strategy games.



New features included a minimap at the bottom right, a way to see the complete array of items in each cell (what is happening to the wires that run underneath the items, and the like). The pistons were updated to vector graphics and now had an aesthetically pleasing extended animation that was no longer a challenge to geometrical limitations.



Instead of rendering all elements at once animation would be limited to the viewport's contents. As the user scrolledaround, elements that were not part of the viewport would be removed. This saves memory and could improve performance.



In the end, it appears CSS transitions were slow and I was unable to find the motivation to work on this issue due to schoolwork and other things. Perhaps I'll revisit this in the near future.



(c) Daniel Lawrence Lu. Page generated on 2022-06-10 by dllup.

In case you have found a mistake in the text, please send a message to the author by selecting the mistake and pressing Ctrl-Enter.
Proctor Goff 0
Joined: 1 year ago
Comments (0)

    No comments yet

You must be logged in to comment.

Sign In / Sign Up