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

domingo, 9 de abril de 2017

Rock Climber - Part 7

Español | English



Como pueden ver, ya tenemos al personaje principal!

Un increíble trabajo del artista al capturar la esencia del juego y crear un personaje tan adecuado.

En esta semana no hubo mucho avance en el proyecto en sí o por lo menos de forma directa. No programé nada, si no que me dediqué en especial a investigar y leer algunos artículos sobre la nueva versión de Unity (5.6) y ver si convenía moverse a la nueva versión.

Si bien no es recomendable cambiar de versión durante un proyecto, en esta ocasión, la nueva versión tiene un componente que puede resolver varios problemas y por suerte, no hubieron problemas al pasar de una versión a otra.

También me dediqué a ver tutoriales sobre Multi-Threading, que permite que dos (o más) procesos distintos se lleven a cabo simultáneamente en vez de uno a la vez, lo cual puede mejorar la eficiencia general aunque no es algo de lo que se deba abusar.

Debido a que mis exámenes de universidad se acercan, las siguientes semanas pueden que sean más ligeras, más leer artículos que puedan ayudar a resolver algunos problemas o resolver algunos problemas chicos.

Después de los exámenes, se va a volver a un ritmo mejor para avanzar más sobre el desarrollo de juego.

-L

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

English


As you can see, we have a main character!!!

An incredible work of the artist to capture the essence of the game and create such a suitable character.

This week there was not much progress in the project itself or at least directly. I didn't program anything, but I dedicated myself to investigate and read some articles about the new version of Unity (5.6) and see if it was convenient to move to the new version.

While it is not recommended to change versions during a project, this time the new version has a component that can solve many problems and luckily, there were no problems when moving from one version to another.

I also focused on tutorials on Multi-Threading, which allows two (or more) different processes to run simultaneously rather than one at a time, which can improve overall efficiency, although it is not something one should abuse.

Because my college exams are approaching, the following weeks may be lighter, more about reading articles that may help solve some problems or solve some small problems.

After the exams, it is going to return to a better pace to further advance on game development.

-L

domingo, 2 de abril de 2017

Rock Climber - Part 6

Español | English


Semana número 6 y ya hay algunos cambios en cuanto al diseño general y algunas mecánicas.

Gracias a la nueva incorporación de un artista al proyecto, puedo distribuir mejor las tareas y tener una segunda opinión de las cosas. Así fue como se llevó a un par de cambios menores y unas mejoras en lo que va a ser la jugabilidad general.

Además del beneficio de tener a alguien talentoso que haga el arte en vez de tener que hacerlo yo (y no salga bien). Por otro lado, también ayuda a que me pueda concentrar más en las tareas de programación del juego.

Por mi lado, sigo trabajando en el generador de niveles que es mi prioridad principal ahora, ya que decidimos analizar mejor más adelante que mecánicas agregar al juego.

Uno de los mayores cambios es que la cámara avanza constantemente, haciendo que el montañista tenga que trepar rápidamente antes de que lo alcance el borde inferior de la pantalla y pierda.

Así que en lo que me concentré esta semana fue en crear el "borde inferior" que haga 2 cosas: primero, hacer que el juego termine si este toca al jugador y segundo, hacer que vaya eliminando los pedazos de montaña que el jugador ya escaló(y no puede ver), esto va a servir como gran elemento de optimización.

Para crear esto, simplemente creé un rectángulo debajo de la cámara que dispara Raycasts para arriba verificando si colisiona con algún elemento. Si es parte de la montaña, que la borre y si es el jugador, que se termine el juego.


Lo siguiente va a ser seguir trabajando en los distintos obstáculos que puede haber en la montaña  y seguir agregando contenido.

-L

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


Week number 6 and there already are some changes to be made to the general design and to some mechanics.

Thanks to the new addition of an artist to the project, I can distribute the tasks better and have a second opinion of things. That's how it led to a couple of minor changes and improvements in what is going to be the general gameplay.

Plus the benefit of having someone talented do the art instead of having to do it myself (and it does not come out right). On the other hand, it also helps me focus more on the game's programming tasks.

On my side, I'm still working on the level generator which is my main priority now, since we have decided to analyze better in the future which mechanics are going to be added to the game.

One of the biggest changes is that the camera is constantly moving, causing the player to climb quickly before he is reached by the lower edge of the screen and loses.

So this week I concentrated on creating the "bottom edge" that does 2 things: first, make the game finish if it touches the player and second, make it go eliminating the mountain pieces that the player has already climbed(and can't see), this will be a great element of optimization.

To create this, I simply created a rectangle underneath the camera that shoots Raycasts up verifying if it collides with any element. If it is part of the mountain, it will erase it and if it is the player, it will end the game.
The next thing is going to be to continue working on the different obstacles that can appear in the mountain and to continue adding content.

-L

domingo, 26 de marzo de 2017

Rock Climber - Part 5


Español | English


Hola a todos! Esta semana la quise dedicar a arreglar todo lo que tenía para comenzar a tener un prototipo jugable.

Pude de una vez por todas solucionar un problema que hacía que el gancho tenga una orientación distinta a donde se apuntaba justo después de haber escalado la montaña. 

Esto se solucionó simplemente haciendo que cada vez que el jugador escale y  rote, el gancho apunte hacia un posición fija, así también se puede fijar la rotación del gancho.

Además de eso, solucioné un par de problemas con las colisiones entre el jugador y el borde de la montaña, con lo que ahora se puede ir hacia cualquier parte de la montaña.

Por lo que ahora se tiene algo jugable:



 Lo siguiente por hacer es seguir agregando cosas sobre esta base, objetos para agarrar, más obstáculos y alguna que otra mecánica.

Seguramente lo próximo en lo que me voy a dedicar es en hacer que el jugador tenga un tiempo limitado mientras esta quieto antes de caerse, lo que va a obligar al jugador a seguir escalando y decidir rápido hacia donde ir.

-L


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


Hi everyone, This week I wanted to dedicate my time to fix everything I had in order to have a playable prototype.

Finally I could solve a problem that made the hook have a different rotation than where the player was pointing, right after climbing the mountain.

This was easily solved by making the hook have a fixed position and rotation once the player has climb and rotate.

Also, I've solved some issues with the collisions between the player and the edge of the mountain, so now the player can go to every part of the mountain.

So now we have something playable:




The next thing to do is to keep adding things above this base, objects to grab, more obstacles and some mechanics.

I'll surely focus on making the player have a limited amount of time when he/she is still before he/she falls, so it makes the player to keep climbing up and decide quickly where to go.

-L

lunes, 20 de marzo de 2017

Rock Climber - Part 4

Español | English



Hola a todos!!!
Esta semana estuve un poco ocupado así que me decidí por hacer algo simple para avanzar con el proyecto.

Así que decidí crear la función que va a ubicar obstáculos en las montañas. Este proceso se hace después de que la montaña se creó y se "rellenó" con sus respectivos tiles, por lo que el obstáculo se posiciona por encima de la montaña.

Si bien convendría que esto no ocurra así, hay que recordar que esto es con el fin de crear niveles para elegir luego los mejores, por lo que las tareas "finas" las puedo hacer a mano.

La función consiste en simplemente ubicar un prefab del obstáculo en una posición fija de X (el "borde" de la montaña) y en una posición aleatoria de Y. Gracias a como se construyó la montaña, esto es muy fácil de hacer y no hay que hacer cuentas para posicionar bien el obstáculo.


Esta es la zona en donde se van a Spawnear los obstáculos


Ejemplo de Obstáculo, se puede ver claramente como esta por encima del "pico" de la montaña


Todavía no me decidí de si los obstáculos deberían o no ser más altos, además, también me faltan crear los otros tipos de obstáculos que puede haber, pero eso para más adelante.


-L



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




Hello everyone!!!
This week I've been a bit busy, so I've decided to make something little in order to progress with the project. 
 
So I've decided to create a function which will place obstacles in the mountains. This process is made once the mountain is created and filled up with its tiles, so the obstacles are on top of the mountain. 
 
Although it would be convenient that this process took place in a different way, we have to remember that the objective of our task is to create levels in order to pick the best ones later; that is why the delicate assignments have to be done by hand. 
 
The function only consists on placing the prefab  of the obstacle in a determined x position (the hillside) and a random Y position. Thanks to the way the mountain was built, this is very easy to be done and you don't need any calculations to place the obstacle correctly.



This is where the obstacles are going to spawn





Example of an obstacle placed right above a "peak" of the mountain.



 
I still haven't  decided weather the obstacles have to be taller, also, the creation of the other types of obstacles is a pending issue, but that for the next time...





-L

sábado, 11 de marzo de 2017

Rock Climber - Part 3




Hola a todos, esta semana estuve trabajando en el sistema para crear los niveles, más precisamente, creando la "base" de los niveles que son el diseño base de las montañas que vamos a escalar.

Voy a explicar de nuevo como va a ser el proceso para crear los niveles:

  • Primero se crean las formas de las montañas
  • Luego se ubican los obstáculos y los items a agarrar
  • Por último los detalles
El primer paso ya esta creado, acá pueden ver unas fotos de como son lo básico de las montañas:





Estos son 2 simples ejemplos, a estas bases se le van a agregar más detalles encima.

Lo bueno de optar por este método es que simplemente tengo que elegir el diseño del cual me guste arrancar dentro de todos los aleatorios que puedan salir.

Para crear este sistema cuento con un GameObject que contiene 2 EdgeColliders2D, en un primer paso, genero la "forma" de cada montaña  por separado con su respectivo Collider. Luego, guardo en una matriz los valores en donde hay picos, para distinguir en donde debo rellenar con cuadrados y en donde con triángulos.

Por último, se recorre la matriz y se verifica si se debe poner un cuadrado, algún triángulo o nada. Lo más difícil fue orientarse sobre en que lugar de la matriz poner el valor que corresponde.

Del lado más técnico, lo más difícil fue descifrar como hacer para recorrer la matriz de abajo para arriba y encima, teniendo que por ejemplo el punto (1,0) representa 1*x + 0*y, Que es lo contrario a como se anotaría matricialmente (0,1) (fila 0, columna 1).

Después de todo me siento satisfecho con el resultado, falta retocar algunos parámetros como la distancia entre las montañas o la altura de las mismas, pero por suerte el sistema lo creé de forma que solo tenga que elegir los valores que quiera para obtener esos distintos resultados.

-L

viernes, 3 de marzo de 2017

Creating a switch to change languages inside a Blog










Hola a todos, en este Post voy a explicar como crear el switch que permite cambiar entre idiomas en un Post de un Blog. Quizá hasta puedan crear una lista en vez de un botón para tener más de dos opciones aplicando casi todos los mismos pasos.

Primero hay que entender que para crear el botón se deben crear 3 aspectos distintos:

  • El botón en sí con HTML
  • El diseño del botón con CSS
  • La programación del botón con Javascript

Por suerte, todo esto se puede hacer dentro del blog mientras el blog permita la edición de HTML cuando creamos los Posts. Primero voy a explicar que se necesita:

Uno debe tener unos divisores (div) en HTML para cada uno de los distintos lenguajes, esto quiere decir que, si tenemos un texto en español y otro en ingles, debemos (En el editor de HTML) "encapsular" los textos dentro de un div de la siguiente manera:

<div id="esp">
                         Texto en Español
</div>

<div id="eng">
                         Text in English
</div>

Es importante que demos los "id" ya que con esos los vamos a identificar más adelante.

La lógica entonces es, si apretamos el botón para ir a la opción en inglés, se esconde el div de español y se muestra el de inglés.

Lo que vamos a hacer primero es buscar un botón tipo switch en internet, si es posible con CSS incluído para personalizarlo y agregarlo (o crearlo personalmente si prefieren).

Recomiendo la siguiente página que enseña como hacer un botón switch:
https://www.w3schools.com/howto/howto_css_switch.asp

Siguiendo el ejemplo de esa página, vamos a agregar el botón mediante HTML simplemente copiando y pegando en nuestro editor HTML.

Luego debemos copiar el diseño del CSS. Para esto necesitamos, dentro de nuestro editor, copiar el código dentro de etiquetas <style> </style>. A partir de ahí deberían poder ver el diseño del botón, de no ser posible, significa que primero hay que publicar el Post para poder verlo.


Lo último por agregar es el Script en Javascript pero primero volvemos al botón en su HTML que pegamos y  dentro de su etiqueta "<input .." colocamos: "onclick="myFunction()" " (sin los primeros "").

Con esto, le decimos al botón que cuando lo presionen ejecute la función "myFunction()" que vamos a crear ahora.

Para eso, debemos crear el código dentro de etiquetas <script> </script> en nuestro editor de HTML.

 Voy a compartir el código que utilizo:

<script>
function changeLanguage() {
    var x = document.getElementById('esp');
    var y = document.getElementById('eng');
    if (x.style.display === 'none') {
        x.style.display = 'block';
        y.style.display = 'none';
    } else {
        x.style.display = 'none';
        y.style.display = 'block';
    }
}
</script>

Lo que hace es, primero encontrar a los divs que antes marcamos como "esp" y "eng" y luego, al apretar el botón, mostrar uno y esconder el otro.


Como último detalle, falta esconder el lenguaje que queremos que este escondido por defecto. Tomando como ejemplo que quiero esconder el texto en Inglés, lo que hay que hacer es: dentro de div, agregar una propiedad de la siguiente manera:

<div id="eng" style="display:none;">

De esta forma, se le indica a esta división que este oculta al principio.

Eso fue todo, espero que les haya sido útil. Si utilizan la misma forma de dividir los textos al hacer sus Posts, la próxima vez solo tienen que copiar y pegar el HTML, CSS y Script del boton tal como esta para que funcione. (Pueden hasta copiar el HTML y el CSS de este botón si miran el código fuente de la página).

-L