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:

Prototype testing!! #gamedev #indie #unity pic.twitter.com/ihaSDM9lBy

— Lautaro Pinilla (@LPinillaa) 26 de marzo de 2017

 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:

Prototype testing!! #gamedev #indie #unity pic.twitter.com/ihaSDM9lBy

— Lautaro Pinilla (@LPinillaa) 26 de marzo de 2017

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

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

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

Hi everyone, this week I've been working on the system that will let me create the levels, more precisely, creating the "base" of the levels that are the design of the mountains we are going to climb.

I'm going to explain again the process by which the levels are going to be created:

• First the shape of tha mountains are made.
• Then, obstacles and things to grab are placed.
• Finally, the details

The first step is done, I'll now show you some pictures of how the basics of the mountains are:

These are 2 simple examples, more details are going to be placed on top of these bases.

The good things of doing things this way is that I simply need to choose from the design that I like the most to start working on among all the random ones that can come out.

To create this system I use one GameObject that has 2 EdgeColliders2D, on a first step, I generate the "shape" of each mountain, separated by its respective Collider. Then, I store the values of places where there are spikes in a matrix, in order to later on decide if I need to fill in with squares or with triangles.

Finally, the matrix is searched and it checks if it needs to place a square, a triangle or nothing. The most difficult thing was to orient yourself on where to put the corresponding value.

On the more technical side, the most difficult thing was to decipher how to do the search in the matrix from the bottom up. And in addition, taking for example the dot (1,0) represents 1 * x & nbsp; + 0 * y, which is the opposite of how one writes it with the "Matrix Notation" (0,1) (row 0, column 1).

Afterall I am satisfied with the results, It is necessary to adjust some parameters like the distance between the mountains or their height, but luckily, the system was created in a way that I just need to adjust some values to obtain those different results.

-L

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

Hi everyone, in this Post I'll explain how to create a toggle switch that allows to change between languages in a Post of a Blog. Maybe you can create a list instead of a switch to have more than two options using almost every step.

First we need to understand that 3 different aspects are needed to create the botton:

• The button with HTML
• The button's design with CSS
• Programming the button with Javascript

Luckily, all of this can be done inside the blog as long as the blog allows HTML editing when we create the Posts. First I'm gonna explain what it needs:

One must have dividers (div) in HTML for each different languages, this means that, if we have text in Spanish and in English, we must put the text inside the labels div in the same way:


<div id="esp">

                         Spanish Text

</div>

<div id="eng">

                         English Text

</div>

Its important that we put the "id" as we are going to use them later on.

So, it works this way: if we press the English button, the Spanish div disappears and the English one shows up.


What we are going to do first is to find a toggle switch button on the Internet, if its possible, with the CSS included so we can customize it an add it (or you may prefer create it manually).

I recommend the following page that shows how to create a button:
https://www.w3schools.com/howto/howto_css_switch.asp

Following the example of that page, we are going to create the button with HTML by simple copying and pasting on our HTML editor.

We then need to copy the CSS design. For this we need, inside our editor, to copy the code inside the tags <style> </style>. From now on, you should be able to see the design of the button, if that doesn't happen, it means that you first need to publish the Post in order to see the button properly.


The last thing is to add the Javascript Script but first, we go back to the button we've just created and inside its "input" label, we put "onclick="myFunction()"" (Ignoring the first "").

With this, we tell the button that whenever it's pressed, it runs the function "myFunction()" that we are going to create now.

For that, we need to create the Script inside the labels <script> </script> inside our HTML editor.

 I'm going to share the same code I use:

<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>

What this code does is: first it looks for the divs we early called "esp" and "eng" and then, when the button is pressed, shows one and hides the other.


As a final detail, we need to hide the text with the language we want hidden by default. Taking as an example we want to hide the Spanish text, what you need to do is: inside the spanish div, add a property as follows:

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

This way, we tell the divider to be hidden at first.

That was all, I hope it has been useful for you. If you use the same way to divide the different text when making your Posts, the next time you just need to copy the HTML, CSS and the Script and past it as it is instead of doing it from scratch. (You can even use the HTML and CSS of this button if you look the source code of this Post).

-L