Jekyll2020-04-21T18:07:32+00:00https://jesusredondo.github.io//feed.xmlJesús Redondo GarciaPersonal Webpage of Jesús Redondo García. This will serve as blog, showcase and personal story telling board.
Video Game Design IV: MAINTAIN MOTIVATION: REALISTIC SCOPE2017-04-17T12:13:00+00:002017-04-17T12:13:00+00:00https://jesusredondo.github.io//project/2017/04/17/VideoGame_design_IV_Maintain%20motivation_Realistic_scope<p>As you already know if you have read my previous blog posts, I am developing my first videogame using <a href="https://libgdx.badlogicgames.com/">LibGDX</a> framework.
Like many others, I started with the clear idea that I could build more or less the game I wanted with enough time. My definition of what I wanted to achieve was this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> The game is a 2D shooter platformer with RPG elements using pixel art graphics. The story will be tailored by the player actions and choices. The skills our character is going to learn are determined by in-game decisions, this means, no level ups, no stats system needed. Game mechanics are based around two pillars:
1. Player’s ability to jump, shoot, hide, evade, rappel, parachuting… All this skillset is determined by player decisions ingame.
2. History is tailored by dialogs between main and secondary characters and by the player’s decisions during the game. What I mean by this is that there are going to be moral decisions during the game and they will modify game playability.
</code></pre></div></div>
<p>Hey! That is something feasible, it is not a MMORPG, nor a 3d game, it wouldn’t even use complex graphics, I could draw the Pixel art. In fact, I painted some screens with the style I wanted to use:</p>
<p><img alt="harbor-level" src="/images/gameDevelop/4/1.jpg" width="450" />
<em>Harbor level</em></p>
<p>This was the main character:</p>
<p><img alt="main-character" src="/images/gameDevelop/4/2.gif" width="100" />
<em>Main character</em></p>
<p>I even had a “technical document” with some game ideas I could use for the game (<em>ROLF</em>):</p>
<p><img alt="main-character" src="/images/gameDevelop/4/3.png" width="400" />
<em>Game ideas</em></p>
<p>It looked like I was progressing well, I had open fronts in different parts of the development, but all of them would become useful for the videogame. And then I started coding… <strong>And I realized I had no idea how to approach even the more basic stuff!</strong></p>
<p>How can I represent the world? What screen resolution am I going to use? What size must the sprites have? How I handle the camera so it follows the main character? How I keep track of the decisions and choices of the game? …</p>
<p>Facing so many questions and so little responses was discouraging. Instead of throwing in the towel, what I have done is refocus the game I want to create, basically I need to start with something simpler, something <strong>feasible for me given my circumstances</strong>. What I decided to do is developing an archetype game, have a very clear goal and organize myself so I won’t lose time in parts of the project I don’t know if will ever come to the final game.</p>
<p>My priority changed to having a demo that could clarify what I wanted to develop.</p>
<h2 id="1-redefining-the-game">1 Redefining the game:</h2>
<p>I changed my game definition to:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> A 2d racing videogame for mobile platforms. The goal of the game is driving from one part to another of the level avoiding obstacles and jumping from different platforms in less than a maximum time. The player controls the rotation of the car’s wheel, accelerating or braking the car. The camera will follow the car during the entire itinerary. The game levels are generated using R.U.B.E.. Graphics right now are just placeholders.
</code></pre></div></div>
<p>After one week of development I came up with the following demo that run in my mobile phone:</p>
<p><img alt="first-demo" src="/images/gameDevelop/Sueltas/reddit_camera/car_prototype_1.gif" width="400" />
<em>First demo</em></p>
<p>For the first time I started to see real progress. Even though the demo was really basic, I consider that doing that for a beginner using LibGDX was a success.</p>
<p>I started to love a game idea that wasn’t the initial idea I had.</p>
<h2 id="2-work-organization-tools-and-focus">2 Work organization. Tools and focus:</h2>
<p>I have a steady job, I am doing this as a hobby, so when I started I didn’t plan what stuff I must do first. I knew there was a lot of stuff to do so I just did what I felt like more, switching from one part to other without any clear objective. In the end all parts must be done…</p>
<p>I created a lot of things during that time… but how useful were those things? My work organization has changed since then, now I have a <a href="https://trello.com/">Trello</a> with all the stuff I have to do in three columns and ordered by importance.</p>
<p><img alt="My-Trello" src="/images/gameDevelop/4/5.png" width="500" />
<em>My trello at the moment of writing this entry</em></p>
<p>I always update my Trello with concise tasks I can finish in one day (sometimes complications arise and tasks take longer). It might look stupid writing what you have to do in a board on Internet, especially if we work as solo-developers. But for me it has been day and night, it is key to know in every moment what you have to do next, and focus effort on that without further delay.</p>
<p><img alt="Archived-trello" src="/images/gameDevelop/4/6.png" width="300" />
<em>Some of the stuff I have already finished</em></p>
<h2 id="3-graphics">3 Graphics:</h2>
<p>I like drawing, I think I’m not too bad at it, so I could produce decent graphics for the game, problem is: I’m not used to doing that, so it would take very long to produce graphical assets for the game.</p>
<p>In fact, I had already created the main char animations:</p>
<p><img alt="Idle" src="/images/gameDevelop/4/2.gif" width="100" />
<em>Idle char</em></p>
<p><img alt="Walking" src="/images/gameDevelop/4/9.gif" width="100" />
<em>Walking char</em></p>
<p><img alt="Running" src="/images/gameDevelop/4/8.gif" width="100" />
<em>Running char</em></p>
<p><img alt="Firing" src="/images/gameDevelop/4/7.gif" width="100" />
<em>Firing char</em></p>
<p>And more scenes as the harbor I showed before:</p>
<p><img alt="Firing" src="/images/gameDevelop/4/10.png" width="150" />
<em>Terrain layers</em></p>
<p>I decided to change the chip and dedicate myself to programming and making a fun game. That is why I am using free repositories like <a href="https://opengameart.org/">OpenGameArt</a>. This has been positive in two respects:</p>
<ol>
<li>
<p>I can spend time programming, not painting.</p>
</li>
<li>
<p>I discover styles that I did not intended to use, but I still like them (something beyond pixel art).</p>
</li>
</ol>
<p>The good thing about using CC0 licensed graphics is that I can modify and use them at my whim.</p>
<h2 id="4-current-state-of-the-project">4 Current state of the project:</h2>
<p>Far from being a finished project, I think I have made significant progress and I really want to squeeze all the juice from the project. My original idea is quite different from the idea in am carrying out, but it is advancing steadily and I am liking it more each day. This is the current state of the game:</p>
<p><img alt="Current-state" src="/images/gameDevelop/Sueltas/reddit_camera/car_prototype_7.gif" width="600" />
<em>Current state of the game</em></p>
<h2 id="5-conclusions">5 Conclusions:</h2>
<p>It is never too late to learn, modify the concept and adapt it to realistic goals. In my case the original video game I had thought is very different from the one I’m developing. I was aware that I had a wrong approach given my abilities, so stepping back has been the right choice to move forward stronger.</p>
<p>Yet all what I did has served me as a tool to realize how important it is to focus the project on something that is temporarily and emotionally viable. <strong>Now I see real and continuous progress in a game, not in a plan</strong>, and that is making me like more my hobby and my new approach every day.</p>
<h4 id="do-not-hesitate-to-comment-on-doubts-and-to-leave-me-new-proposals-for-the-following-entries">Do not hesitate to comment on doubts and to leave me new proposals for the following entries!</h4>
<p>Follow me on twitter for more entries like this → <a href="https://twitter.com/Musicaligera_">@Musicaligera_</a></p>As you already know if you have read my previous blog posts, I am developing my first videogame using LibGDX framework. Like many others, I started with the clear idea that I could build more or less the game I wanted with enough time. My definition of what I wanted to achieve was this:Video Game Design III: GAME DEVELOPER’S TOOLKIT2017-03-15T15:37:00+00:002017-03-15T15:37:00+00:00https://jesusredondo.github.io//project/2017/03/15/VideoGame_design_III_Game_Developer's_Toolkit<p>In this entry we will review a bunch of tools that are key to develop our video game. This time all the tools are important no matter what framework/engine we are using: LibGDX, Cocos2d-x, Corona, Unity …</p>
<p>Let’s see what we got!</p>
<h2 id="1-pixel-art-graphic-editor--animator-pyxeledit">1 Pixel Art graphic editor & Animator: <a href="http://pyxeledit.com/">PyxelEdit</a></h2>
<p>PyxelEdit is a multiplatform (Mac, Linux, OSx) graphic editor for pixel art that costs 0€. It is completely designed to create sprites, animations and tiles for our games. Its main advantages are its lightweight design and ease of use.</p>
<p>PyxelEdit allows working with layers, just like Photoshop. It supports exporting in many different formats. In the following example I have exported an animation as a TextureMap:</p>
<p><img alt="running-texturemap" src="/images/gameDevelop/3/1.png" width="400" />
<em>Running textureMap</em></p>
<p>And here I have exported the same animation as a GIF:</p>
<p><img alt="running-gif" src="/images/gameDevelop/3/2.gif" />
<em>Running GIF</em></p>
<p>Of course this tool can be used with Unity, LibGDX, Cocos2d-x…</p>
<h2 id="2-tile-map-editor-tiled">2 Tile Map Editor: <a href="http://www.mapeditor.org/">Tiled</a></h2>
<p>Tiled is a multiplatform tool completely free. It is the perfect tool to imagine and plan levels and maps made of cells.</p>
<p>It supports square cells:</p>
<p><img alt="square-cells" src="/images/gameDevelop/3/3.png" width="400" />
<em>Square cells</em></p>
<p>Hexagonal:</p>
<p><img alt="hexagonal-cells" src="/images/gameDevelop/3/4.png" width="400" />
<em>Hexagonal cells</em></p>
<p>Isometric:</p>
<p><img alt="Isometric-cells" src="/images/gameDevelop/3/5.png" width="400" />
<em>Isometric cells</em></p>
<p>But what it is really useful in Tiled is its ability to add extra information to our maps. The following example shows an area of the map in which I have added extra information:</p>
<ol>
<li>
<p>Where the player is going to be when I load the map.</p>
</li>
<li>
<p>A dangerous area: when the player enters that area, monster will appear.</p>
</li>
</ol>
<p><img alt="metadata-tiled" src="/images/gameDevelop/3/6.png" width="400" />
<em>Metadata in Tiled</em></p>
<p>The maps created in Tiled are exported into a file that includes all the features we described using the editor. This file can be opened and read by any framework/engine (LibGDX, Unity, Cocos2d-x…) and it will have to be used as the basis for creating all the objects, textures, metadata, conditions of our map in the game.</p>
<h2 id="3-physics-engine-box2d">3 Physics Engine: <a href="https://github.com/erincatto/Box2D">Box2D</a></h2>
<p>Box2D is a physics engine that simulates all the physics for recreating a realistic world. In this world we define bodies: our main character, the floor, the walls… and the properties for these bodies: density, friction, elasticity, position… you get the idea. The physics engine is in charge of simulating how all these objects react when interacting with other forces and collide.</p>
<p>For basic games or games with no realistic physics like platformers, we could try to create or own physics mini-engine. But if we want to create realistic physics iterations in our games like <a href="https://www.angrybirds.com/">Angry Bird</a> or <a href="https://www.cuttherope.net/">Cut the Rope</a> a physics engine is the way to go (both of them use Box2D).</p>
<p>Unity uses Box2D as Physics Engine by default. There are ports of the library for C, C++, Java, Javascript… So you can leverage its power no matter what framework/engine you choose.</p>
<p>In the following example I am using Java’s Box2D implementation with LibGDX to simulate a square that moves to right at a constant velocity. The ball is affected by gravity and I move it by applying forces to it.</p>
<p><img alt="box2D-simulation" src="/images/gameDevelop/3/7.gif" width="400" />
<em>Box2D simple simulation</em></p>
<h2 id="4-graphical-editors-for-physics-engines-rube">4 Graphical editors for Physics Engines: <a href="https://www.iforce2d.net/rube/">R.U.B.E.</a></h2>
<p>Graphical editors are an aid to work with physics engines. We could define all the entities in the game by directly coding them… but in order to create complex worlds including many entities things can get too much complicated.</p>
<p>R.U.B.E. is a graphical editor that allows us place all the bodies and properties of a simulation in a very easy way.</p>
<p>Similar to Tiled, R.U.B.E. generates a file that can be read by Unity, LibGDX, Cocos2d-x… to be interpreted. The file is converted to a world in our game that Box2D can simulate.</p>
<p>Rube costs about 40€, but it is an indispensable tool if we want to work woth realistic and complex physics. The editor itself allows us to do simulations before exporting them:</p>
<p><img alt="RUBE-simulation" src="/images/gameDevelop/3/8.gif" width="400" />
<em>R.U.B.E. can run simulations</em></p>
<h2 id="5-particle-editors-2d-particle-editor">5 Particle editors: <a href="https://github.com/libgdx/libgdx/wiki/2D-Particle-Editor">2D Particle Editor</a></h2>
<p>The particle effects are the confetti of video games. They are images, colors and shapes shown on the screen that follow some determined pattern (sometimes a random pattern).</p>
<p>2D Particle Editor is an editor for LibGDX, so it can’t be used in Unity, Cocos2d-x an. This time I present a tool that is not the easiest to learn neither the easiest to install… but hey, it’s what we’ve got in LibGDX and besides… it is free.</p>
<p>In the following example you can see how we can play around with the editor to simulate a fire effect:</p>
<p><img alt="2DParticleEditor" src="/images/gameDevelop/3/9.png" width="300" />
<em>2D Particle Editor</em></p>
<p>And here it is the result:</p>
<p><img alt="2DParticleEditor-fire" src="/images/gameDevelop/3/10.gif" width="250" />
<em>Fire particle Effect</em></p>
<h2 id="6-other-tools">6 Other Tools:</h2>
<p>Of course there are many other tools, but hey, this post has to end sometime.
Here I left you some other tools I use in case you want to further explore:</p>
<ul>
<li>
<p><a href="https://github.com/">Github</a>.</p>
</li>
<li>
<p><a href="https://pages.github.com/">Github Pages</a>.</p>
</li>
<li>
<p><a href="http://www.aurelienribon.com/blog/projects/universal-tween-engine/">Java Tween engine</a>.</p>
</li>
<li>
<p><a href="https://www.aseprite.org/">Aseprite</a>.</p>
</li>
<li>
<p><a href="http://opengameart.org/">OpenGameArt</a>.</p>
</li>
</ul>
<h2 id="conclusions">Conclusions:</h2>
<p>That is the arsenal of basic tools we need as programmers / designers.</p>
<p>Of course there are other alternatives to the tools I have reviewed. But at least I hope you can get an idea of the different elements that play a role in the video game creating process, so you ultimately end up using the ones you like most.</p>
<p>Here it is a gif from a bizarre/random project that conglomerate all the tools used in this entry:</p>
<p><img alt="Bizarre-project" src="/images/gameDevelop/3/11.gif" width="400" />
<em>A bit of everything</em></p>
<h4 id="do-not-hesitate-to-comment-on-doubts-and-to-leave-me-new-proposals-for-the-following-entries">Do not hesitate to comment on doubts and to leave me new proposals for the following entries!</h4>
<p>Follow me on twitter for more entries like this → <a href="https://twitter.com/Musicaligera_">@Musicaligera_</a></p>In this entry we will review a bunch of tools that are key to develop our video game. This time all the tools are important no matter what framework/engine we are using: LibGDX, Cocos2d-x, Corona, Unity …Video Game Design II: DEPLOYING LIBGDX ON IOS2017-03-03T16:20:00+00:002017-03-03T16:20:00+00:00https://jesusredondo.github.io//project/2017/03/03/VideoGame_design_II_Deploying_on_iOS<p>In this second entry I am going to review all the neccesary steps to build the default LibGDX base project. The example will be running on two different platforms: Desktop (which is pretty much straightforward if you follow the <a href="https://github.com/libgdx/libgdx/wiki">wiki</a> and iOS. Testing our project in our Apple phone devices… well, it can be a bit tricky, it is not hard, but you have to scrupulously follow some steps.</p>
<p>If you want to try the same project on Android devices there is enough documentation in the LibGDX wiki.</p>
<p>It is true that this entry breaks a little bit the flow on the video games developing series, but this is so important that I think is well worth leaving everything written down before moving on.</p>
<h3 id="prerequisites">Prerequisites:</h3>
<ol>
<li>
<p><strong>IDE</strong> → <a href="https://www.jetbrains.com/idea">IntelliJ IDEA</a></p>
</li>
<li>
<p><strong>Hardware I am using</strong> → Macbook Pro retina mid 2014 and iPhone 5c.</p>
</li>
<li>
<p><strong>Apple Developer Account (free version)</strong> → In order to sign the app being created we need an Apple Developer Account. This account is free and will allow us to sign apps to be used in our devices, although we obviously can’t publish them in the App Store. If we also want do so, we mush adhere to the <a href="https://developer.apple.com/programs/">Apple Developer Program</a>, which costs 100€ per year.</p>
</li>
</ol>
<h2 id="step-1-download-libgdx-framework-and-create-a-new-project">Step 1: Download LibGDX framework and create a new project.</h2>
<p>Go to the <a href="https://libgdx.badlogicgames.com/download.html">LibGDX download page</a> and run the jar. We fill up the available options as follows:</p>
<p><img alt="libgx-entry2-1" src="/images/gameDevelop/2/1.png" width="700" /></p>
<p>As you can see we are only generating Desktop and iOS projects.</p>
<p><strong>BEWARE</strong>: Before finishing, go to “Advanced” and tick “IDEA” as we are going to use this IDE.</p>
<p>It is absolutely critical to pay attention at the “Package name” written because it will be decisive to run the app on iOS.</p>
<h2 id="step-2-open-the-created-project-and-run-it-in-desktop">Step 2: Open the created project and run it in Desktop.</h2>
<p>We open IntelliJ IDEA → Open→ Move to the path we created the base project and then select the *.ipr file.</p>
<p><img alt="libgx-entry2-2" src="/images/gameDevelop/2/2.png" width="400" /></p>
<p>Click on “Import Gradle” and we select all the possible options.</p>
<p>To run the Desktop project we have to create a “Run configuration”. We go to menu Run → Edit Configurations and the click to the “+” symbol to add an application.
We have to fill everything like in the following picture: <strong>be careful with the working directory!</strong></p>
<p><img alt="libgx-entry2-3" src="/images/gameDevelop/2/3.png" width="700" /></p>
<p>To run the demo now, simply click on the “Play” button or push <em>ctrl-r</em> and voalá:</p>
<p><img alt="libgx-entry2-4" src="/images/gameDevelop/2/4.png" width="350" /></p>
<h2 id="step-3-lets-run-the-demo-on-ios">Step 3: Let’s run the demo on iOS!</h2>
<p>First things first, let’s download the <em>2.3.0 MoviDevelop Plugin for IDEA</em> (the former RoboVM). You can find it in the official <a href="http://robovm.mobidevelop.com/">Movidevelop Web</a>. To install the plugin follow the steps written there:</p>
<ol>
<li>Install Xcode on Mac OS X, open it once and agree to the license</li>
<li>Download the RoboVM IntelliJ IDEA plugin Jar</li>
<li>Open IntelliJ IDEA/Android Studio, go to Preferences -> Plugins</li>
<li>Click Install plugin from disk…</li>
<li>Select the Jar you downloaded and re-start IntelliJ IDEA/Android Studio</li>
</ol>
<p>Now we create a XCode project with the exactly same package we used for our project. This is the only way we can sign our app:</p>
<ol>
<li>Open XCode.</li>
<li>New XCode Project →Single View Application …</li>
</ol>
<p><img alt="libgx-entry2-5" src="/images/gameDevelop/2/5.png" width="550" /></p>
<p><strong>CAUTION</strong> –> The “Organization identifier” value has to be the same that “Package” we used in LibGDX.
<strong>CAUTION</strong> –> The product name has to be: IOSLauncher.</p>
<p>We finish the creation; it doesn’t matter where we store the project. And then we change the Identity <strong>again</strong> to match out LibGDX Package:</p>
<p><img alt="libgx-entry2-6" src="/images/gameDevelop/2/6.png" width="500" /></p>
<p><strong>CAUTION</strong> –> Xcode should automatically sign this app. Take into account that with the base developer account you can only sign 10 apps each 7 days (yes, thanks Apple).</p>
<p>To be really sure everything is as expected I will show you my <em>robovm.properties</em> file which is located inside the “ios” project:</p>
<p><img alt=" libgx-entry2-7" src="/images/gameDevelop/2/7.png" width="700" /></p>
<p>Finally we create a new “Run configuration”, but this time we select a RovoVM iOS configuration:</p>
<p><img alt=" libgx-entry2-8" src="/images/gameDevelop/2/8.png" width="700" /></p>
<p>And now when we click “Run” or “Ctrl-R” the Base project will be install in our device as a regular App. Lastly you have to accept your developer sign in your device in order to run the code.</p>
<h2 id="to-sum-up">To sum up</h2>
<p>Creating a base project and make it run natively on iOS isn’t particularly difficult but we have to be careful. There aren’t many updated tutorials in this particular topic in the libGDX wiki or community, hence this entry.</p>
<p>Please post here if you need help. Don’t forget to follow me on twitter for more entries like this → <a href="https://twitter.com/Musicaligera_">@Musicaligera_</a></p>In this second entry I am going to review all the neccesary steps to build the default LibGDX base project. The example will be running on two different platforms: Desktop (which is pretty much straightforward if you follow the wiki and iOS. Testing our project in our Apple phone devices… well, it can be a bit tricky, it is not hard, but you have to scrupulously follow some steps.Video Game Design I: FRAMEWORK SELECTION2017-02-14T22:36:00+00:002017-02-14T22:36:00+00:00https://jesusredondo.github.io//project/2017/02/14/VideoGame_design_I_Framework_Selection<p>In this series of posts I will develop a video game from bottom to top. During these series of posts, many of the assets and decisions will be taken in conjunction with the people that follow the manual. Don’t miss anything and subscribe at <a href="https://twitter.com/Musicaligera_">@Musicaligera_</a>.</p>
<h2 id="the-video-game-itself">The Video Game Itself:</h2>
<p>At the moment of writing this post, there are many decisions which aren’t determined yet: graphics style, number of levels, title of the game, how portable it will be… We will discuss all these terms in depth in following posts, it will serve as a mental exercise about how to deal with design.</p>
<p>For now own we can precise it will a 2D shooter platformer with RPG elements. The story will be tailored by the player actions and choices. The skills our character is going to learn are determined by in-game decisions, this means, no level ups, no stats system needed. Game mechanics are based around two pillars:</p>
<ol>
<li>
<p>Player’s ability to jump, shoot, hide, evade, rappel, parachuting… All this skillset is determined by player decisions ingame.</p>
</li>
<li>
<p>History is tailored by dialogs between main and secondary characters and by the player’s decisions during the game. What I mean by this is that there are going to be moral decisions during the game and they will modify game playability.</p>
</li>
</ol>
<h2 id="which-framework-should-i-use">Which framework should I use?</h2>
<p>Ahhh, the jump of faith, becoming from zero experience, as was my case this is a very tough decision. What Have I done? I have spent several months playing around with different platforms. In this entry we are going to review the ones I have put my foot into:</p>
<h3 id="cocos2d-x"><a href="http://cocos2d-x.org/">Cocos2d-x</a></h3>
<p><img alt="cocos-logo" src="/images/gameDevelop/cocos2d-x.png" width="200" />
<em>Cocos2D-x Logo</em></p>
<p>Its main Language is C++. Assets management, animations and sounds are handled with its graphic tool <a href="http://www.cocos2d-x.org/wiki/Cocos_Studio">Cocos Studio</a>. Less than a year ago, they have launched a tool called <a href="http://cocos2d-x.org/docs/editors_and_tools/creator/">Cocos Creator</a> which integrates all the production workflow. Unfortunately, Cocos creator doesn’t support C++ (only LUA and JavaScript), and I really want an strong structured language to program. Moreover, Unity, being a Graphical Framework aswell is much more mature in case I would like a graphical interface.</p>
<p>To soak up Cocos2d-x I have followed this book: <a href="https://www.amazon.com/Cocos2d-x-Example-Beginners-Guide-Second/dp/1785288857">Cocos2d-x by Example: Beguinner’s Guide - Second Edition</a></p>
<p>I have completed this two great tutorials as well: <a href="https://www.makeschool.com/online-courses/tutorials/learn-cocos-studio-and-c-by-building-the-game-of-life/what-game-of-life">The Game of Life</a> and <a href="https://www.makeschool.com/online-courses/tutorials/build-a-clone-of-timberman-in-c-with-cocos2d-x-and-cocos-studio/getting-started">Shushi Neko</a>.</p>
<p><img alt="Shushi-Neko" style="border:1px solid black" src="/images/gameDevelop/ShushiNeko.png" width="250" />
<em>Capture of Shushi Neko</em></p>
<p>What I like most about Cocos2d-x is the amount of freedom it provides to the developer, having access to the whole framework’s code. But I have declined the idea of developing with this framework mainly because of its ABSOLUTE, NON EXISTENT, PIECE OF SHIT, GARBAGE [more billis here] Documentation. Yeah, everything is free, but the amount of open fronts they have doesn’t promise a clear future. Besides, the terminology is a real mess and there is not clear roadmap. If you are into the framework… that’s OK, getting into it is another history.</p>
<h3 id="unity"><a href="https://unity3d.com/">Unity</a></h3>
<p><img alt="unity-logo" src="/images/gameDevelop/UnityLogo.png" width="200" />
<em>Unity Logo</em></p>
<p>Unity’s main Languages are C#, Boo (what the hell is that) and JavaScript - personally I am interested in C#. All the develop framework is covered by its graphical tool <a href="https://store.unity.com/products/unity-personal?_ga=1.232537051.53158089.1485866409">Unity</a>: Animation, music, presets, coding (even though for coding is normally used MonoDevelop). It is integrated with many other programs to edit animations, sounds, tiles, models…</p>
<p>The “free” version includes almost all the functionality, but it also includes the Unity logo at the start of your game. Unity is really interesting because it is becoming the “de-facto” referent of the industry for indie games. The dark side of using unity is the lack of freedom as user, you don’t have access to the code behind and you have to adapt yourself to Unity’s workflow.</p>
<p>I have learnt Unity by completing these two tutorials: <a href="https://unity3d.com/learn/tutorials/projects/roll-ball-tutorial">Roll a Ball (3D)</a> and <a href="https://unity3d.com/learn/tutorials/projects/2d-roguelike-tutorial">RougueLike Tutorial (2D)</a>.</p>
<p>Unity’s main drawback is lack of freedom as user and its engine opacity. Apart from that is a superb tool in terms of animation, sound, depuration and integration.</p>
<h3 id="libgdx"><a href="https://libgdx.badlogicgames.com/">LibGDX</a></h3>
<p><img alt="libgdx-logo" src="/images/gameDevelop/LibGDX.png" width="200" />
<em>LibGDX Logo</em></p>
<p>Its language is Java. LibGDX, as Unity and Cocos2d-x, is a cross-platform game development framework. The concept is clear: LibGDX creates a base project with its assets, this project is written in Java using the Framework libraries. These classes and code work as an interface between the base project and the different implementations in the different platforms, right now it supports Android (Slightly different to ordinary Java, but just in terms of the compiler), IOS (it used to work with RoboVM), Desktop (Java) and Web (GWT).</p>
<p>How have I learn to use it? Mainly consulting the <a href="https://github.com/libgdx/libgdx/wiki">Wiki</a>, which is superb. I have completed this tutorial aswell: <a href="http://www.kilobolt.com/zombie-bird-tutorial-flappy-bird-remake.html">Zombie Bird</a>.</p>
<p>I have chosen LibGDX to develop my game for several reasons:</p>
<ol>
<li>
<p>It uses Java, language I am very familiarized with. This is personal, but I prefer using Java to C++. I enjoyed C# during my Unity learning process, though.</p>
</li>
<li>
<p>It is flexible enough to make the framework work for me and no the other way around.</p>
</li>
<li>
<p>The documentation and community are top notch.</p>
</li>
<li>
<p>It is free and open source.</p>
</li>
</ol>
<p>The cons of using libGDX: It works at low level, the developer has to deal with more stuff manually, specially regarding to assets management in contrast with Unity. This doesn’t translate directly to slower framework in terms o developing, but it has a steeper learning curve in this regard.</p>
<h2 id="to-be-continued">To be continued…</h2>
<p>This is the first part of a series of entries I plan to post as the game develops. I am actually working on the graphical assets (mockups) I am going to use. Any ideas, suggestion or advises will be welcomed.</p>In this series of posts I will develop a video game from bottom to top. During these series of posts, many of the assets and decisions will be taken in conjunction with the people that follow the manual. Don’t miss anything and subscribe at @Musicaligera_.First spider animation by @a_n_a_ana_2016-12-04T13:36:00+00:002016-12-04T13:36:00+00:00https://jesusredondo.github.io//design/2016/12/04/first-spider-animation<p>This is the first contact in the world of pixel art for <a href="https://twitter.com/a_n_a_ana_">@a_n_a_ana_</a>. This character animation was made using <a href="http://pyxeledit.com/">PyxelEdit</a>:</p>
<p><img src="/images/Spider.gif" alt="" />
<em>First Spider-Animation</em></p>This is the first contact in the world of pixel art for @a_n_a_ana_. This character animation was made using PyxelEdit:Main character idle animation2016-12-02T10:20:00+00:002016-12-02T10:20:00+00:00https://jesusredondo.github.io//design/2016/12/02/idle-animation-character<p>I continue designing the main character for my game. This is time for idle animation. This animation was made using <a href="http://pyxeledit.com/">PyxelEdit</a>:</p>
<p><img src="/images/idle.gif" alt="" />
<em>Idle character</em></p>
<h2 id="edit">EDIT:</h2>
<p>I was a bit dissapointed with the result, so I tweaked the legs a little bit. Making exagerated movements turned out being a good idea:</p>
<p><img src="/images/idle2.gif" alt="" />
<em>Idle character version 2</em></p>
<blockquote>
<p><a href="http://ludumdare.com/compo/">Ludum Dare</a>, there I go…*</p>
</blockquote>I continue designing the main character for my game. This is time for idle animation. This animation was made using PyxelEdit:Colaborative PAINT using GitHub [DI]2016-11-14T21:00:00+00:002016-11-14T21:00:00+00:00https://jesusredondo.github.io//teaching/2016/11/14/DI-PAINT-Proyect<p>Last year I didn’t have time to taught git fundamentals to my students. Some former students have pointed out that git was something that was demanded in almost every job offer they wanted to apply.</p>
<p>Futhermore, many of the actual students suggested that it would be a great idea to take some time learning the basics of git.</p>
<p>So this year I have spent some time creating a couple of base projects on github they could work on.</p>
<ol>
<li>
<p>The first one is a <a href="">Mineseeker alike game</a>. It was useful to understand repositories and basic GitHub workflow (and of course get hans on Java Swing).</p>
</li>
<li>
<p>A colaborative programmed PAINT. This project goes further with the git flow. It starts off with a base created by me. The base has the following structure:</p>
</li>
</ol>
<p><img src="/images/base_project.png" alt="Base Project" /></p>
<ul>
<li>
<p>Students have to work in groups. A member of the gruop is going to fork the main repository and add the other members as colaborators. Then they decide which painting tool they want to implement. This is accorded by an <a href="https://github.com/jesusredondo/practicaPAINT/issues">issue in the main repository</a>.</p>
</li>
<li>
<p>As they progress they will change <a href="">the project</a>.</p>
</li>
<li>
<p>Finally they will have to present their changes and add a Pull Request to my repository. I will accept those pull request. Of course they will merge my own repository with theirs to solve conflicts before any pull request.</p>
</li>
</ul>Last year I didn’t have time to taught git fundamentals to my students. Some former students have pointed out that git was something that was demanded in almost every job offer they wanted to apply.MineSeeker [DI]2016-10-27T17:23:00+00:002016-10-27T17:23:00+00:00https://jesusredondo.github.io//teaching/2016/10/27/DI-MINESEEKER-Proyect<p>After seeying the main components in the Swing library it was time to develop a full project. Moreover it was a perfect opportunity to learn the very basics of git. So I prepared <a href="http://www.slideshare.net/JessRedondoGarca/git-i-fork-commit-pull-push">these slides</a> and a <a href="https://github.com/jesusredondo/Ejercicio35-Base">base project in github</a>.</p>
<p>The base project used 2 classes to detach the logic from the visuals. The MVC is not 100% used because the View acts as controller (listerners). The model is 100% detached, but it is not observable.</p>
<p>The base project & documentation can be found clicking in the following image:</p>
<p><a href="https://github.com/jesusredondo/Ejercicio35-Base"><img src="/images/mineseeker.png" alt="Mineseeker screen" /></a>.</p>
<p>The controller was represented by:</p>
<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="kd">private</span> <span class="kd">final</span> <span class="kd">static</span> <span class="kt">int</span> <span class="no">MINA</span> <span class="o">=</span> <span class="o">-</span><span class="mi">1</span><span class="o">;</span>
<span class="kd">final</span> <span class="kt">int</span> <span class="no">MINAS_INICIALES</span> <span class="o">=</span> <span class="mi">20</span><span class="o">;</span>
<span class="kd">final</span> <span class="kt">int</span> <span class="no">LADO_TABLERO</span> <span class="o">=</span> <span class="mi">10</span><span class="o">;</span>
<span class="kd">private</span> <span class="kt">int</span> <span class="o">[][]</span> <span class="n">tablero</span><span class="o">;</span>
<span class="kd">private</span> <span class="kt">int</span> <span class="n">puntuacion</span><span class="o">;</span>
</code></pre></div></div>
<p>To initialitlice the board it was necessary to place <code class="language-plaintext highlighter-rouge">MINAS_INICIALES</code>mines in the <code class="language-plaintext highlighter-rouge">tablero</code>(board):</p>
<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="cm">/**Método para generar un nuevo tablero de partida:
* @pre: La estructura del tablero debe existir
* @post: Al final el tablero se habrá inicializado con tantas minas como marque la variable MINAS_INICIALES.
* El resto de posiciones que no son minas guardan en el entero cuántas minas hay alrededor de la celda
*/</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="nf">inicializarPartida</span><span class="o">(){</span>
<span class="c1">//Borro del tablero la información que pudiera haber anteriormente (los pongo todos a cero):</span>
<span class="k">for</span> <span class="o">(</span><span class="kt">int</span> <span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="n">i</span> <span class="o"><</span> <span class="n">tablero</span><span class="o">.</span><span class="na">length</span><span class="o">;</span> <span class="n">i</span><span class="o">++)</span> <span class="o">{</span>
<span class="k">for</span> <span class="o">(</span><span class="kt">int</span> <span class="n">j</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="n">j</span> <span class="o"><</span> <span class="n">tablero</span><span class="o">[</span><span class="n">i</span><span class="o">].</span><span class="na">length</span><span class="o">;</span> <span class="n">j</span><span class="o">++)</span> <span class="o">{</span>
<span class="n">tablero</span><span class="o">[</span><span class="n">i</span><span class="o">][</span><span class="n">j</span><span class="o">]</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="c1">//Me creo LADO_TABLERO*LADO_TABLERO números en un array list, uno para cada una de las posiciones del tablero:</span>
<span class="nc">ArrayList</span><span class="o"><</span><span class="nc">Integer</span><span class="o">></span> <span class="n">posicionesMina</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">ArrayList</span><span class="o"><</span><span class="nc">Integer</span><span class="o">>();</span>
<span class="k">for</span> <span class="o">(</span><span class="kt">int</span> <span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="n">i</span> <span class="o"><</span> <span class="o">(</span><span class="no">LADO_TABLERO</span><span class="o">*</span><span class="no">LADO_TABLERO</span><span class="o">);</span> <span class="n">i</span><span class="o">++)</span> <span class="o">{</span>
<span class="n">posicionesMina</span><span class="o">.</span><span class="na">add</span><span class="o">(</span><span class="n">i</span><span class="o">);</span>
<span class="o">}</span>
<span class="c1">//Saco 20 posiciones sin repetir del array y les coloco una mina en el tablero:</span>
<span class="nc">Random</span> <span class="n">rd</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Random</span><span class="o">();</span>
<span class="k">for</span> <span class="o">(</span><span class="kt">int</span> <span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="n">i</span> <span class="o"><</span> <span class="no">MINAS_INICIALES</span><span class="o">;</span> <span class="n">i</span><span class="o">++)</span> <span class="o">{</span>
<span class="kt">int</span> <span class="n">iPosElegida</span> <span class="o">=</span> <span class="n">rd</span><span class="o">.</span><span class="na">nextInt</span><span class="o">(</span><span class="n">posicionesMina</span><span class="o">.</span><span class="na">size</span><span class="o">());</span>
<span class="kt">int</span> <span class="n">posElegida</span> <span class="o">=</span> <span class="n">posicionesMina</span><span class="o">.</span><span class="na">get</span><span class="o">(</span><span class="n">iPosElegida</span><span class="o">);</span>
<span class="n">posicionesMina</span><span class="o">.</span><span class="na">remove</span><span class="o">(</span><span class="n">iPosElegida</span><span class="o">);</span>
<span class="c1">//Meto una mina en esa posición:</span>
<span class="n">tablero</span><span class="o">[</span><span class="n">posElegida</span><span class="o">/</span><span class="no">LADO_TABLERO</span><span class="o">][</span><span class="n">posElegida</span><span class="o">%</span><span class="no">LADO_TABLERO</span><span class="o">]</span> <span class="o">=</span> <span class="no">MINA</span><span class="o">;</span>
<span class="o">}</span>
<span class="c1">//Calculo para todas las posiciones que no tienen minas, cuántas minas hay alrededor.</span>
<span class="k">for</span> <span class="o">(</span><span class="kt">int</span> <span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="n">i</span> <span class="o"><</span> <span class="n">tablero</span><span class="o">.</span><span class="na">length</span><span class="o">;</span> <span class="n">i</span><span class="o">++)</span> <span class="o">{</span>
<span class="k">for</span> <span class="o">(</span><span class="kt">int</span> <span class="n">j</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="n">j</span> <span class="o"><</span> <span class="n">tablero</span><span class="o">[</span><span class="n">i</span><span class="o">].</span><span class="na">length</span><span class="o">;</span> <span class="n">j</span><span class="o">++)</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="n">tablero</span><span class="o">[</span><span class="n">i</span><span class="o">][</span><span class="n">j</span><span class="o">]</span> <span class="o">!=</span> <span class="no">MINA</span><span class="o">){</span>
<span class="n">tablero</span><span class="o">[</span><span class="n">i</span><span class="o">][</span><span class="n">j</span><span class="o">]</span> <span class="o">=</span> <span class="n">calculoMinasAdjuntas</span><span class="o">(</span><span class="n">i</span><span class="o">,</span><span class="n">j</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="c1">//Pongo la puntuación a cero:</span>
<span class="n">puntuacion</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span>
<span class="o">}</span>
</code></pre></div></div>
<p>They had some problems with the logic of the game. Especially the chunks in which they had to figure out how many mines there were around a cell:</p>
<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="cm">/**Cálculo de las minas adjuntas:
* Para calcular el número de minas tenemos que tener en cuenta que no nos salimos nunca del tablero.
* Por lo tanto, como mucho la i y la j valdrán LADO_TABLERO-1.
* Por lo tanto, como mucho la i y la j valdrán como poco 0.
* @param i: posición verticalmente de la casilla a rellenar
* @param j: posición horizontalmente de la casilla a rellenar
* @return : El número de minas que hay alrededor de la casilla [i][j]
*/</span>
<span class="kd">private</span> <span class="kt">int</span> <span class="nf">calculoMinasAdjuntas</span><span class="o">(</span><span class="kt">int</span> <span class="n">i</span><span class="o">,</span> <span class="kt">int</span> <span class="n">j</span><span class="o">){</span>
<span class="kt">int</span> <span class="n">iInicial</span> <span class="o">=</span> <span class="nc">Math</span><span class="o">.</span><span class="na">max</span><span class="o">(</span><span class="mi">0</span><span class="o">,</span> <span class="n">i</span><span class="o">-</span><span class="mi">1</span><span class="o">)</span> <span class="o">;</span>
<span class="kt">int</span> <span class="n">iFinal</span> <span class="o">=</span> <span class="nc">Math</span><span class="o">.</span><span class="na">min</span><span class="o">(</span><span class="no">LADO_TABLERO</span><span class="o">-</span><span class="mi">1</span><span class="o">,</span> <span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="o">);</span>
<span class="kt">int</span> <span class="n">jInicial</span> <span class="o">=</span> <span class="nc">Math</span><span class="o">.</span><span class="na">max</span><span class="o">(</span><span class="mi">0</span><span class="o">,</span> <span class="n">j</span><span class="o">-</span><span class="mi">1</span><span class="o">);</span>
<span class="kt">int</span> <span class="n">jFinal</span> <span class="o">=</span> <span class="nc">Math</span><span class="o">.</span><span class="na">min</span><span class="o">(</span><span class="no">LADO_TABLERO</span><span class="o">-</span><span class="mi">1</span><span class="o">,</span> <span class="n">j</span><span class="o">+</span><span class="mi">1</span><span class="o">);</span>
<span class="kt">int</span> <span class="n">acumuladorMinas</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span>
<span class="k">for</span> <span class="o">(</span><span class="kt">int</span> <span class="n">indI</span> <span class="o">=</span> <span class="n">iInicial</span><span class="o">;</span> <span class="n">indI</span> <span class="o"><=</span> <span class="n">iFinal</span><span class="o">;</span> <span class="n">indI</span><span class="o">++)</span> <span class="o">{</span>
<span class="k">for</span> <span class="o">(</span><span class="kt">int</span> <span class="n">indJ</span> <span class="o">=</span> <span class="n">jInicial</span><span class="o">;</span> <span class="n">indJ</span> <span class="o"><=</span> <span class="n">jFinal</span><span class="o">;</span> <span class="n">indJ</span><span class="o">++)</span> <span class="o">{</span>
<span class="k">if</span><span class="o">(</span><span class="n">tablero</span><span class="o">[</span><span class="n">indI</span><span class="o">][</span><span class="n">indJ</span><span class="o">]</span> <span class="o">==</span> <span class="no">MINA</span><span class="o">){</span>
<span class="n">acumuladorMinas</span><span class="o">++;</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="k">return</span> <span class="n">acumuladorMinas</span><span class="o">;</span>
<span class="o">}</span>
</code></pre></div></div>After seeying the main components in the Swing library it was time to develop a full project. Moreover it was a perfect opportunity to learn the very basics of git. So I prepared these slides and a base project in github.Alejandro in Pixel Art2016-10-16T22:37:00+00:002016-10-16T22:37:00+00:00https://jesusredondo.github.io//design/2016/10/16/Alejandro-pixel-art<p>Portrait of <a href="https://www.youtube.com/channel/UCRRP-yBqPb22-nDXTO_FLJg">Alejandro</a>. As <a href="/design/2016/10/09/first-running-cycle-animation.html">before</a>, I have used <a href="http://pyxeledit.com/">PyxelEdit</a>:</p>
<p><img src="/images/alejandro-pyxeledit.jpg" alt="Alejandro picture" />
<em>Alejandro’s smile</em></p>
<blockquote>
<p><a href="http://ludumdare.com/compo/">Ludum Dare</a>…, just give me some time…</p>
</blockquote>Portrait of Alejandro. As before, I have used PyxelEdit:First running cycle animation2016-10-09T14:00:00+00:002016-10-09T14:00:00+00:00https://jesusredondo.github.io//design/2016/10/09/first-running-cycle-animation<p>First attempt ever to draw a character animation. This animation was made using <a href="http://pyxeledit.com/">PyxelEdit</a>:</p>
<p><img src="/images/running-cycle-1.gif" alt="" />
<em>First Running-Cycle</em></p>
<blockquote>
<p><a href="http://ludumdare.com/compo/">Ludum Dare</a>, someday, just someday….*</p>
</blockquote>First attempt ever to draw a character animation. This animation was made using PyxelEdit: