Qules, Unite!
I’ve always wanted to make a computer game. I got my two cents by Mravenci (Ants), but I had many other ideas, especially in my early years of programming (1995+).
In my early programmer years I had a bunch of games in my head and after some time some of them started to be quite thought out. Unfortunately I didn’t have the skills to bring it to life, I tried and failed many times in many programming languages.
When a decade passed by with no signs of completing any of them, I decided to take good parts from all of them and put them into a single game, which I will finish. I thought about a perfect main character and decided to go with a simple sphere. It will be easy to make, with lower polygon count than person or creature (although a nice sphere is often quite hi-poly) and it can roll really fast, which can alter as a car ride.
In 2013 I attended MS Fest in Prague and saw Tomáš Slavíček’s lecture about MonoGame (follow-up of dead XNA), so I gave it a try. It was OK, but still... making 3D game was beyond my skills. I kept it in 2D, but wanted 3D inside. MonoGame was exactly what I wanted and I started to see how complicated making of a 3D game is. Keeping the code small is absolutely impossible. The same problem I had with WebGL, which was a hot topic at that time.
I didn’t want to use some pre-made 3D engine or game makers, because I saw some of them and they felt overcomplicated, with many features I probably won’t use or need and will run slowly on some machines.
During that time I thought about a name for the game. I somehow decided all stuff I do will start with “Q” and I many, many years ago I felt in love with a name of an old Czech game “Koules” (for UNIX, OS/2 and Linux). It’s plural of “koule”, which means “sphere” in Czech. I like the fusion of a Czech word with English grammar. After many variations I ended up with “Quly” (and “Qule” for the spheres).
About two years after my tries with XNA my younger brother showed me Unity. It was quite funny, when I described my idea of the game to him and he loaded the RollerBall demo scene, which was pretty much it :-)
My first tries were OK, but I was quite lost and didn’t really know how to do stuff. I was otherwise engaged at that time, so I decided to continue when Unity 5 is out.
The release happened few months later. I really appreciated YouTube tutorials, especially those from Unity team itself. Unfortunately, some of them still used legacy features, which has been often replaced by newer approaches in Unity 5. Many times I followed a tutorial and spent few hours fiddling and tweaking, but ultimately (and often accidentally) found out it’s the legacy way and therefore not recommended for a new game. Damn!
My brother gave me a nice jump-start and I started to build a “learning” version of Quly. I always do it this way, so in my mind I’m not afraid to mess it up, because for the real thing I’ll start over from scratch.
Thanks to great capabilities of Unity I was able to concentrate on gameplay and features only. Many things are already made, like collisions, physics, vector math and tons and tons of other stuff, so I didn’t need to bother with them (for example in XNA I had to deal with all of them).
I realized how foolish I was for rejecting pre-made 3D engines. I’ll never be good enough to make an optimized game engine by myself! I'm no John Carmack. There’s such vast amount of things it needs to be done and of course done properly.
In Unity I simply make a short script, attach it to a GameObject and test it. It’s really fast, straight forward and I love it! Also, C# is my favorite programming language and the system of scripts and stuff in Unity really suits me. And cooperation with my favorite 3D software of all times, Trimble SketchUp Make, puts me on cloud nine! :-)
box-sizing: border-box;
One of the biggest pains in a web development, apart from vertical centering (except for inside a table cell), is a W3C box model, which doesn’t include padding and borders into the width. You can’t use “padding: 10px; width: 100%;“, because the element will be 20px wider, than the parent element.
Fortunately, in CSS3 there’s box-sizing property. Default value is “content-box”, which behaves as the W3C model, but if you set the property to “border-box”, it solves the problem with padding/border and the width. I noticed almost all major CSS frameworks adds this property to every element, like this:
- * {
- box-sizing: border-box;
- }
In the past (in terms of internet it's rather ancient history), comparable pain was an old Internet Explorer’s own box model concept, which included border and padding into the width (so basically like “box-sizing: border-box”), whilst Netscape Navigator (ancestor of Firefox) followed W3C standards.
Side note: I don’t like when Microsoft, or any other company for that matter, does stuff in their own way, but this was actually better, than standards.
Anyway, when designing a web page you had to hack those differences, usually by using two divs instead of one. Outer div had the 100% width, inner div had the padding and border. Width of the inner div has been calculated automatically. And this wasn’t the worst hack at the time, webdesign was often close to a witchcraft :-)
Microsoft added “standard mode” (now we call it “almost standard”) into IE6, but kept so called “quirks mode” default and switching of those modes has been guided by DOCTYPE. This changed with IE7, where W3C mode became default (according to my test in IE11 dev tools).
Now, if you use HTML5 doctype <!DOCTYPE html>, you will get the best results – so use it always!
And about the vertical centering, you can use display property with CSS2.1 value “table-cell”, so even div can behave like a table cell, with working vertical-align: middle, like this:
- .verticenter {
- display: table-cell;
- vertical-align: middle;
- }
But don’t forget you should to make it a proper table! So parent div will have “display: table-row;“ and it’s parent div will have “display: table;“. Happy styling!