domingo, 13 de agosto de 2017

Volviendo de las vacaciones | Coming back from vacations

Español | English



En estas vacaciones de invierno que pasaron pude hacer varias cosas, desde cosas Web en Ruby on Rails y Javascript hasta empezar con C++. Esta vez les traigo un poco de los avances que pude hacer en general. Algunas de las cosas que hice son públicas así que pueden ver el código y hasta corregir/criticar si encuentran algún error.

Aplicaciones Web

Decidí aprender Ruby on Rails ya que estaba por participar de una Hackathon (Hackathon Unearthed 2017) y con mi grupo queríamos una plataforma fácil para realizar aplicaciones webs. Si bien no fue lo que terminamos haciendo en el evento, aprendí bastante.

Mi principal objetivo era saber hacer una aplicación básica y poder también complementarla con gráficos utilizando Chart.js, una librería Open Source que se maneja con JavaScript. Sobre Chart.js, pueden ver como fui creando gráficos simples y viendo como modificar la información de estos: https://jsfiddle.net/lpinilla/n2hj9nbn/


C++

Comencé también a aprender C++ por mi cuenta. Primero viendo tutoriales de como crear un Snake aunque lo abandoné porque no sentía que estaba aprendiendo. Así que decidí hacer un Snake de cero luchando con C++. Por ahora estoy trabajando en el Backend y todavía no tengo algo funcional y tampoco se si lo que estoy haciendo es correcto, para resolver esto voy a utilizar Tests Unitarios. 

Rock Climber


Como pueden ver, terminé de re-hacer las mecánicas del jugador. Falta ver si le agrego un gancho o no pero prefiero continuar con lo demás. Por ahora esta va a ser la mecánica base, todavía queda por ver si la cámara va a seguir al jugador o va a ser fija y va subiendo con él.

Es todo por ahora, voy a ir avanzando de a poco tanto en Rock Climber como en el Snake y como dije arriba, si ven algún error o optimización que se pueda hacer al código, pueden avisar tranquilamente y lo voy a tener en cuenta.

Saludos.

-L


-------------------------------------------------------------------------------------------------------
English


In this winter holidays that went by I could do several things, from web Stuff in Ruby on Rails and Javascript to start with C++. This time I bring some of the progress I could make in general. Some of the things I've done are public so you can see the code and even correct/criticize if you find any errors.

Web Apps

I decided to learn to use Ruby on Rails as I was goint to participate in a Hackathon (Hackathon Unearthed 2017) and with my group we wanted a platform that was easy to use to create WebApps. Although it was not what we ended up doing at the event, I learned a lot.

My main goal was to know how to make a basic WebApp and to be able to put some charts in it using Chart.js, which is an Open Source library that is handled with Javascript. About Chart.js, you can see how I was creating simple charts and seeing how to modify their information: https://jsfiddle.net/lpinilla/n2hj9nbn/

C++

I also started learning C++ on my own. First watching tutorials on how to create a Snake although I abandoned it because I felt I wasn't learning. So I decided to make a Snake from scratch fighting with C++. For now I'm working on the Backend and I still don't have something functional and I also don't know if I'm doing things right, to solve this I'll use Unit Testing.
Link: https://github.com/lpinilla/Snake

Rock Climber


As you can see, I've re-done the player mechanics. I still have to see if I'll add a hook or not but I rather continue on everything else. For now this will be the base mechanic, I still have to see if the camera will follow the player or it will be fixed and go up with the player.

That's all for now, I'll continue working both Rock Climber as the Snake and as I said above, if you can spot any error in the code or find a way to optimize things, don't be shy to let me know and I'll definitely take it into account.

Cheers.

-L

domingo, 23 de julio de 2017

Rock Climber - Part 10

Español | English


Parte 10. Re-haciendo casi todo.

Después de hacer más o menos funcional el generador de niveles (que aún esta incompleto), decidí volver a hacer las mecánicas del jugador, ya que habíamos hablado con el artista de que lo mejor era que el jugador vaya saltando de lado a lado.

Así que me estuve dedicando a eso, decidí además utilizar RigidBodies para el personaje en vez de hacer yo mismo las mecánicas de cero para utilizar el motor de física de Unity y que sean más realistas los saltos.

Además de eso, trabajé en una forma de darle al player un "descanso". Entre cada salto tiene 3 segundos antes de que se caiga, esto es para que pueda pensar bien a donde saltar.

Lo último en lo que estaba trabajando es la misma mecánica de tener el gancho del jugador para indicar la dirección del salto. No pude utilizar mi antiguo código tan fácilmente porque algunas estructuras del personaje las armé de otra manera.

Prefiero no subir imágenes ni gifs por ahora para después mostrar un prototipo funcional completo. Así que van a tener que esperar para ver como esta quedando.

Saludos.

-L


----------------------------------------------------------------------------------------------------------

English


Part 10. Re-making almost everything.

After making a sort of functional level generator (which is still incomplete), I decided to make the player mechanics again, as the artist and I have agreed that it was best if the player jump from one side to another.

So that's what I've been doing, I also decided to use RigidBodies for the character instead of doing all the mechanics from scratch and to use Unity's Physics Engine so the jumps are more realistic.

Besides that, I was working in a way of giving the player a "break". Between jumps, the player has 3 seconds before it falls, this is so that the player can think clearly where to jump.

The last thing I've been working on was the same mechanic as before, having the player's hook to indicate the direction of the jump. I couldn't use the old code so easily because this time I've set up things differently in the player's structure.

I rather not to upload any images or gifs for now and then show a complete functional prototype. So you will have to wait to see how it's going.

Cheers.

-L

jueves, 13 de julio de 2017

Actualización y Reporte | Update and Status

Español | English


Hola a todos!

Como pudieron notar, últimamente no estuve escribiendo desde hace un tiempo, esto fue debido a mis exámenes (de los cuales me falta solo 1 para estar de vacaciones). Primero que todo quiero aclarar que el lento progreso de Rock Climber se debe tanto a lo mencionado recién y también a la falta de conocimientos de como resolver algunos problemas. 

Para esto estoy haciendo juegos ahora, para aprender. De este juego ya aprendí un montón de como crear Terrenos Procedurales 1D y como utilizar los Meshes. Todavía faltan cosas por hacer así que todavía quedan cosas por aprender!

Por otro lado, puede que empiece a aparecer contenido nuevo en el Blog, el nombre no es simplemente "diario de un indie game dev" porque quiero hacer otras cosas también. Algunas relacionadas con el desarrollo de juegos y otras no tanto, como pueden ser aplicaciones Web o para Mobile. 

Aunque también puede que comience por el camino de crear un Game Engine de cero programando en C++. Este proyecto sería muy a largo plazo y solo con fines educativos, para aprender tanto a manejarme con C++ como para saber qué hace exactamente un Game Engine. Obviamente que no voy a solapar este proyecto con Rock Climber.

Mi objetivo actual es poder avanzar lo suficiente como para poder lanzar Rock Climber al mercado para antes de que termine el año. Estamos evaluando con el artista el hecho de no avanzar más con el generador de niveles sino que hacerlos a mano para poder avanzar con el juego.

También soy consciente de que abandoné el "Generador Procedural de Circuitos de Carreras", esto fue un poco a propósito ya que requería un poco más de entrenamiento en otras áreas y aprender a programar mejor en el Paradigma Orientado a Objetos (POO). Sin embargo esto es algo a lo que voy a volver más adelante.

Así que atentos al blog que ahora voy a estar trabajando más en los proyectos!

Saludos.

-L

--------------------------------------------------------------------------------------------------------------
English


Hi everyone!

As you probably noticed, I haven't been writing on my blog for a while, this was because of my exams (from which I only have to give only 1 more before I'm on holidays). First of all I want to make clear that the slow progress shown in Rock Climber is because of what I've mentioned above and also because of some lack of knowledge on how to solve certain problems.

That's why I'm making games know, to learn. From this game I've already learnt a lot of things such as creating 1D Procedural terrains and how to use Meshes. I still have a lot to do so I have a lot to learn!

On the other hand, there might be new content on the Blog, the name is not just "Diary of an Indie Game Dev" because I want to do other things too. Some related to Game Dev and some not, such as WebApps or MobileApps.

Although I might start a new journey of creating a Game Engine from scratch all built in C++. This would be a very long term project and only for educational purposes, to learn how to handle myself with C++ and to learn what does a Game Engine actually do. Obviously I won't overlap this project with Rock Climber.

My current goal is to be able to advance in the game as much as I can in order to put it on the market before this year ends. For this we are discussing with the artist the fact of not moving more forward with the Level-Generatos and do them by hand in order to advance with the game.

I'm also aware I abandoned the "Procedural Racing Track Generator", this was kind of on purpose as I wanted to train other areas and to learn how to use more properly the Objected-Oriented Paradigm (OOP). Although it's something I'll come back to in the future.

So keep up with the blog as I'm going to be working more on the projects!

Cheers.

-L

lunes, 10 de julio de 2017

Rock Climber - Part 9

Español | English



Nuevo progreso! En los momentos libres que tuve me dediqué a seguir con la generación procedural de las montañas, lo último que me faltaba era cómo hacer que se muestren en pantalla ya que hasta ahora solo había una línea que delimitaba su forma.

Por lo que tuve que aprender lo básico de como funcionan las Mesh en Unity y como se muestra una imagen, como a partir de puntos se crean triángulos y a partir de unos cálculos estos van a ser las imágenes que vemos. Por supuesto que esto lo tuve que hacer a mano porque debía crear la imagen a partir del contorno que había hecho.

Entonces el proceso fue el siguiente: Crear a partir de los vértices de la montaña nuevos vértices, con estos luego iba a formar triángulos y después simplemente pasar toda esa información a un objeto Mesh de Unity y este se iba a encargar de hacer el resto. Por suerte no tuve que meterme con muchas cuentas o cálculos de vectores normales por la iluminación ya que el juego es 2D, lo que hace que haya una sola fuente de iluminación y por lo tanto que sea la misma en todas.

Entonces utilicé el siguiente método:


Los puntos que creé que menciono más arriba son los puntos de la izquierda, los impares. Estos iban a estar a la misma altura que los puntos de la montaña pero en un valor de x fijo.

Lo más importante a tomar en cuenta es como se construye el camino naranja (el camino Hamiltoneano en un grafo bipartito). Lo que decidí hacer es ir intercalando vértice a vértice según la numeración, eso trae la ventaja de que forma los triángulos que podemos ver resaltados.

Unity para crear un Mesh necesita 2 arrays (como mínimo), uno de Vertices y otro de Triángulos. El de vértices es simplemente pasarle todos los vértices de la montaña más los que se crearon sobre el eje azul. El vector de triángulos es un vector en el cual en cada posición se le asigna un índice, este índice corresponde al vértice. Entonces por ejemplo triángulo más abajo esta dado por los vértices 0, 1 y 2. Los mencioné de esa manera ya que al ordenar los vértices, se debe hacer en sentido horario.

Haciendo sobre toda la montaña, se pueden tener resultados como el siguiente:


Por lo cual estoy bastante satisfecho con el resultado. Lo siguiente es buscar la forma en la cual pueda agregar los obstáculos en los lugares más adecuados.

Hasta pronto.

-L

-------------------------------------------------------------------------------------------------------------

English



New progress! In the moments when I had some spare time I continue working on the procedural generation of the mountains, the last thing I was missing was making them be shown in the screen as until now, the only thing that could be seen was their shape.

So I had to learn the basics of how Meshes work in Unity and how an image is displayed, how from a set of points triangles are created and then, based on them, the triangles are created and after some calculations, an image as we know it is shown. Of course I had to sort of do it from scratch as I was trying to make an image out of the border of the mountains.

So I followed the next process; First create a new set of Vertex based on the vertexs of the moutain's border which with all theese I would later on create the triangles and finally pass all that information to Unity to let it handle the rest. Luckily I didn't have to mess around too much with calculations of normal vectors for the illumination because it is a 2D game, so there is only one source of light and every object has the same one.

So I made the following method:


The poins I created which I mention earlier are the ones on the left, the ones with odd numbers. This will be at the same height than each point of the border of the mountain but they will have a fixed x position.

The most important thing to notice is how the orange path is built (The Hamiltonian path in a bipartite graph). What I decided to do was to switch from one vertex to another following the enumaration, this brings the huge advantage of forming the triangles we can se highlighted.

Unity needs 2 arrays (minimum) for creating a Mesh, one of Vertex an another of Triangles. The one of the Vertex was simply pass all the vertexs of the montain's border and then give the new ones I've created along the blue axis. The Triangles vector is a vector in which in every position, an index is assigned, this index corresponds to a vertex. So for example, the lowest triangle is given by the vertexs 0,1 and 2. I mentioned them in that order because when ordering vertexs, it must be done in a clock-wise orientation.

By doing this all over the mountain, the following result could be obtain: 




So I'm quite satisfied with the result. The next thing is to find a way in which I can place the obstacles in suitable places.

See you soon.

-L

domingo, 21 de mayo de 2017

Rock Climber - Part 8

Español | English



Por fin pasaron los exámenes, aunque todavía quedan trabajos por entregar y dentro de poco comienzan de nuevo más exámenes.

Desde que me liberé de estudiar estuve trabajando (y jugando al Witcher 3) en hacer de nuevo la generación de las montañas para obtener un resultado más natural.

Me encontré con un algoritmo que era justo lo que quería hacer, se llama MidPoint Displacement (Desplazamiento del Punto Medio) que consiste en hallar el punto medio en un segmento, desplazarlo y repetir el proceso en los nuevos 2 segmentos que se generaron hasta que se cumpla una condición.

Una vez que leí y entendí la funcionalidad general del algoritmo, lo implementé de manera recursiva basándome en lo que alguien había hecho que tenía la ventaja de poder indicarle cuantos puntos tiene que haber en la recta en total. Al final si bien el algoritmo funcionaba, no daba los resultados esperados:


La línea verde es un Edge Collider 2D sobre el cual aplicaba el algoritmo, se puede ver como en el centro hay una línea recta eso no debería pasar.

Si bien podía haber seguido modificando el algoritmo, quería ver otra solución que alguien había propuesto (Ada Lovecraft) en la plataforma CodePens: 


Como pueden ver, el resultado es mucho más natural, pero tenía un problema, estaba en JavaScript y pensado para Web, por lo que no podía simplemente copiarlo y pegarlo en Unity.

Así que me tomé el tiempo de analizar el código y ver que hizo, de esta manera pude traducir el código a C# y hasta ver posibles optimizaciones.

(Nota: el código si bien funciona, es ineficiente, se puede ver simplemente si cambian el valor "Iterations" de 5 a 9 y ver como se traba la PC un poco. Aunque cabe destacar que normalmente no se usaría un valor mayor a 8).

Aunque no podía ser todo tan simple, ya que no se muy bien manejarme con colecciones dentro de C# y no encontraba el equivalente a ArrayList de Java, por lo que decidí hacer mi propia colección genérica de elementos en las que luego iba a guardas los Vectores 2D para trabajar sobre ellos.

Por si hay alguno interesado, la optimización que le encontré al código es usar una Lista Ordenada (que agregue los elementos en orden) en vez de simples vectores, si bien no testie que de verdad sea una solución, a simple vista fue lo primero que noté.

Así que ahora puedo tener resultados mucho más naturales:



Otra observación sobre este último algoritmo es que este se basa en cantidad de iteraciones que se hacen sobre la recta, no como la implementación anterior, por lo que si ponemos un valor de 9 para iteraciones, podemos tener más de 200 puntos.

Por lo que ahora lo que hace falta es cambiar el código para que el terreno se haga verticalmente y crear un mecanismo del cual pueda, una vez generado un terreno, poder guardarlo. Esto va a ser lo más importante del generador de niveles ya que va a ser lo que me va a dejar elegir y guardar los niveles que más me hayan gustado.

-L

----------------------------------------------------------------------------------------------------

English


Finally the exams passed, although I still have work to do and a new set of exams are coming shortly.


Since I was available after the exams, I've been working (and playing Witcher 3) with a new way of making the generation of mountains to obtain a more natural result
 
I found an algorithm that did just what I wanted, It's called MidPoint Displacement and its job is to find the midpoint of a segment, move it and then repeat the process with the new 2 segments until a criteria is met.

Once I read and understood the general functionality of the algorithm, I implemented it recursively following an approach I've seen online which has the advantage of indicating exactly how many points you want the segment to have in total. Finally the algorithm did work but it didn't give the expected results:

 

The green line is an Edge Collider 2D, to which I applied the algorithm, It can be seen in the center that there is a straight line, which shouldn't happen.

 Although I could keep working and modifying the algorithm to make it work, I wanted to check another solution that someone proposed (Ada Lovecraft) on the platform CodePens:


As you can see in the link, the result is much more natural but I had a problem, it was made in JavaScript and made for Web, so I couldn't just copy it and pase it to Unity.

So I took the time to analyze the code and see what she did, this way I was able to translate it to C# and even see possible optimizations.

(Note: The code although it works, is inefficient, you can see it if you change the parameter "Iterations" from 5 to 9 and see how your PC takes a time to process it, although it's important to mention that someone wouldn't use values bigger than 8).

But it couldn't be so easy, as I don't know yet how to handle correctly with Collections in C# and I couldn't find a proper equivalent to an ArrayList from Java, so I decided to create my own generic collection which I would later use to store the 2D Vectors to work with them.

If there is someone interested, the optimization I found to the code is to use an Ordered List (which adds elements in order) instead of simple vectors, I didn't test this theory but it was the first thing I noticed when I looked at the code.

Now I can have much more natural results:



Another observation about this last algorithm is that its based on the number of iterations it does to the original segments rather than on the number of total points, like previous implementation, so if we put an iteration value of 9, we might have more than 200 points

So now I need to change the code so that it makes the terrain vertically and create a mechanism that will enable me to save the terrain once it's generated. This is going to be the most important aspect of the level generator, as it will let me save the levels I chose to be the best from all the generated ones.

-L