Saint_Modo [Lexaloffle Blog Feed] RUBIK'S CUBE <p> <table><tr><td> <a href="/bbs/?pid=128992#p"> <img src="/bbs/thumbs/pico8_rubikscube-1.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=128992#p"> RUBIK'S CUBE</a><br><br> by <a href="/bbs/?uid=50060"> Saint_Modo</a> <br><br><br> <a href="/bbs/?pid=128992#p"> [Click to Play]</a> </td></tr></table> </p> <h1>RUBIK'S CUBE</h1> <img style="margin-bottom:16px" border=0 src="/media/50060/rubik s cube 360.gif" alt="" /> <h2>CONTROLS :</h2> <h3>Moving Around !</h3> <p>Use the <strong>(&uarr;) (&darr;) (&larr;) (&rarr;)</strong> <em>Arrow Key</em> to move around the cube.<br /> you can invert the control in the <em>option</em> menu.</p> <h3>Selecting / Unselecting faces !</h3> <p>Use <strong>(O)</strong> to select a face, the selected face will be <em>Highlighted</em> and<br /> 3 move option will appear.<br /> Use <strong>(O)</strong> again to unselect the face.</p> <h3>Rotate faces !</h3> <p>Once you have selected a face, Use the <strong>Arrow Key</strong> to rotate the face.<br /> Use the <strong>(&larr;)</strong> <em>Arrow Key</em> to turn 90&deg; counter clockwise<br /> Use the <strong>(&rarr;)</strong> <em>Arrow Key</em> to turn 90&deg; clockwise<br /> Use the <strong>(&uarr;)</strong> and <strong>(&darr;)</strong> <em>Arrow Key</em> to turn 180&deg;</p> <h3>Option Menu !</h3> <p><strong>Press (X)</strong> to open the <em>option</em> menu in-game.<br /> the <em>option</em> menu will also appear at the start of the game.<br /> Use the <strong>(&uarr;)</strong> and <strong>(&darr;)</strong> <em>Arrow Key</em> to navigate in the menu.<br /> <strong>(&larr;) (&rarr;) (X)</strong> and <strong>(O)</strong> will interact with what's in the menu.</p> <img style="margin-bottom:16px" border=0 src="/media/50060/rubik s cube_2.gif" alt="" /> <h2>RUBIKS'S CUBE RULES :</h2> <p>Rubik's Cube is a popular 3D puzzle game that was invented by Ernő Rubik, in 1974.<br /> The cube consists of six faces, each with nine colored squares, which can be twisted and turned to create different combinations.<br /> The goal of the game is to solve the puzzle by aligning all the squares of each face with the same color.<br /> The Rubik's Cube has become a worldwide phenomenon and is enjoyed by people of all ages and skill levels.</p> <img style="margin-bottom:16px" border=0 src="/media/50060/rubik s cube p8_0.png" alt="" /> <h2>BEHIND THE SCENES :</h2> <p>/!\ English not my first language, grammar difficult, sorry sorry /!\</p> <p><div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"></p> <h3>Did you know ?</h3> <p>I am not a programer.<br /> I do not know how to solve a rubik's cube.</p> <p>&quot;Then, Why did you make one?&quot; I hear you ask, well, i saw <a href="">this video</a> on youtube.<br /> I already knew about cos and sin doing circles and stuff.<br /> and I thought I could push the concept further with fake perspective.</p> <p>So what simple puzzle game can I make with just a cube?<br /> A Rubik's Cube, that's the game plan.</p> <h3>Making a &quot;3D&quot; cube</h3> <p>Doing the base cube wasn't that difficult,<br /> it follows what there is in the video, but scale down the X and Y axis with of the circle with another cos controlling all of that.<br /> Then I just keep the top and bottom part far away from one another when the cube is on front of us.<br /> And bring the top and bottom part close to the middle of the screen for the top and bottom view.</p> <p><strong>BUT THEN !!!</strong><br /> Doing the nine squares on each face was more difficult<br /> a na&iuml;ve way to think of it would be to take the distance between each corner and divided by 3, repeat and multiply by 2 and you would have the coordinate, but this does not account for perspective.<br /> The result of this was an &quot;indent effect&quot;, it felt like the further away the squares where, the bigger they get.<br /> We want the opposite of that.</p> <p>The solution was to take shift we calculated by doing the na&iuml;ve method, and adding it again to the result, and multiply this shift by a cos or a sin of the rotation of the cube.<br /> This makes the position of the pieces in between the corner shifts away from the &quot;camera.&quot;<br /> and with that, we have x and y coordinate for every square on the cube that fake perspective<br /> Is it accurate? No.<br /> Is it good enough? ? I believe so.</p> <h3>Selecting and Rotating faces</h3> <p>Gettings the face was simple and straight to the point.<br /> Get the inclination of the cube.<br /> Is the camera high?Select the top face.<br /> Is the camera low?Select the bottom face.<br /> Else just get the rotation of the cube, and you select one of the vertical face.</p> <p>But again, moving them was way more difficult,<br /> I don't have a clear way to do it and would love to have your feedback on it.</p> <p>I separated the problems on two categories, the top and bottom face, and the vertical face.<br /> The top and bottom face wasn't so difficult, first copy all the flat faces on a table, then copy them back to the cube with the appropriated transformation, the side face of the flat face was juster a shift in their position, it works the same for the top and bottom faces.</p> <p>The vertical faces were a nightmare.<br /> Just rotating the face in front of the camera was fine and works pretty much the same as above.<br /> But the side face was horrible.</p> <p>Let me tell you first how the faces are made.<br /> I have a table witch store each face from 1 to 6, 1 is the top, 6 the bottom and 2 to 5 the side face.<br /> Then for each face a have 3 tables other table, for the faces X data,<br /> And in those tables have the 3 y coordinate making a table like this:</p> <p><strong>CUBE[FACE][POSITION X][POSITION Y]</strong></p> <p>this gave me quitea headache because<br /> you would think that for getting the side ofan another vertical face you would just move the CUBE[face] by +1 or -1,<br /> but if you are face 2 or 5, you would get the face top and bottom, but we want to stay on the vertical face...</p> <p>And when we want to get the side of the top and bottom from a verticale face, well, each verticale face are neightbore with different position X and y from the top and bottom face.<br /> it created too many edge case.<br /> I ended up doing a long table (or a truth table?, i don't know of those things are called) that would give the order of every x and y coordinate to take for every vertical face, and after all of that it finally work.</p> <h3>The Token probleme</h3> <p>I ran out of token.<br /> I needed to make the menu, a scramble system for the cube, have quality of life option, and a congratulation message for when the player solve the cube, and I have 70 tokens left.</p> <p>i did a Majeur rewrite off many thing to save a few token, in the finish game, i have 2 token left.<br /> i am not a programer, i pretty much learn by doing and falling, and so i don't know any optimisation technique.<br /> in the end, i was able to save enouph token to finish the game,<br /> There are a few micro details in the menu I wish I could have fixed, and I wish I would have been able to do a better congratulation message... But in the end, I made it!</p> <h3>Congrats! you made it!</h3> <p>That was a fun project to make, a quick one week, one shot.<br /> I wanted to go back to another project I was making, way bigger, a game I already put 6 months in, that I am doing on love2d.<br /> But this is a nice break, and I wanted to have to criticism on my way of programing.<br /> So that's it, I hope you enjoy the game!</p> <p><em>~Savary Benjamin</em><br /> </div></div></div></p> <h2>CREDITS :</h2> <p><a href=""> @Gruber</a> <a href="">Pico-8 Tunes Vol.1</a><br /> <a href=""> @p01</a> <a href="">Triangle rasterizer</a><br /> <a href=""> @freds72</a> <a href="">thick line routine</a><br /> <a href=""> @drakeblue</a> <a href="">Printing Outlined Text</a><br /> <a href="">Lua easing Library</a></p> Tue, 25 Apr 2023 13:47:02 UTC Motorbike <h1>First test of motorbike V0.1</h1> <p> <table><tr><td> <a href="/bbs/?pid=86036#p"> <img src="/bbs/thumbs/pico8_motorbikedemo-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=86036#p"> motorbikedemo V0.1</a><br><br> by <a href="/bbs/?uid=50060"> Saint_Modo</a> <br><br><br> <a href="/bbs/?pid=86036#p"> [Click to Play]</a> </td></tr></table> </p> <p>Her is my work in progresse little project, motorbike<br /> at the beginning i just wanted to learn how to make paralax<br /> there is barely anything, just a few sprit and a very basique hitbox system<br /> that's it.</p> Fri, 01 Jan 2021 21:15:20 UTC rockpaperscissorsmyfirstgameV1 <h1>Rock Paper Scissors / my first game !</h1> <p> <table><tr><td> <a href="/bbs/?pid=85927#p"> <img src="/bbs/thumbs/pico8_rockpaperscissorsmyfirstgame-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=85927#p"> rockpaperscissorsmyfirstgameV1</a><br><br> by <a href="/bbs/?uid=50060"> Saint_Modo</a> <br><br><br> <a href="/bbs/?pid=85927#p"> [Click to Play]</a> </td></tr></table> </p> <p>Her is my first game !<br /> Its just rock paper scissors, press left/up/right to select your choice.<br /> It took me 4 day to make it, its slow, but i was abel to understande code logic !<br /> The IA is very simple, it just chose at random when you select something.</p> Wed, 30 Dec 2020 14:48:27 UTC