Forem: Jorge Acosta

Creando mecánicas: rotar una caja

Jorge Acosta — Fri, 28 Oct 2022 12:58:08 +0000

Queremos construir una mecánica que nos permita poder mover una caja, pero rotándola de un punto de referencia (pivot), esto se quiere conseguir para lograr mecánicas de puzzles en las cuales los personajes deberán mover las cajas formando cierto patrón, esquivando obstáculos o para que la orientación de la caja exponga un elemento que permita avanzar en el escenario, como una escalera.

para lograr esto, usaremos un método de transform:

transform.RotateAround(Vector3, Vector3, float);

el primer parámetro es la dirección en la que queremos girar, imagina que quieres empujar una caja con tus manos, la dirección de tus manos es el vector que deberá ir aquí.

el segundo parámetro es la posición del pivot, es decir, el punto en el que nuestra caja se ancla y donde está el eje de giro, que es perpendicular al de la dirección.

Finalmente, el ultimo parámetro es la cantidad de giro que queremos.

void turningBox(){

    if(isTurning){

        float currentAmount = speed * Time.deltaTime;
        amount += currentAmount;

        if(amount >= 90.0f){
            isTurning = false;
            amount = 0.0f;
            return;
        }

        transform.RotateAround(pivot, direction, currentAmount);

    }
}

como lo que queremos es girar en 90 grados nuestra caja en algún sentido, cuando la variable booleana isTurning esta en true la variable amount va acumulando giro, hasta llegar a los 90, es en ese momento que paramos el giro.

el método turningBox lo ejecutamos en cada frame

void Update(){
    turningBox();
}

Ahora debemos preguntarnos cómo calcular el pivot y la dirección

void TurningToDirection(Vector3 pivotVector, Vector3 forceDirection){
    if(isTurning) return;
    pivot = transform.position  + (pivotVector - Vector3.up) * size;
    direction = forceDirection;
    isTurning = true;
}

Dependiendo de donde queramos empujar, debemos calcular el pivot de esta forma:

transform.position  + (Vector3.right - Vector3.up) * size;

desde la posición de nuestra caja, sumamos el vector de donde vamos a empujar (en el ejemplo right) y siempre restamos Vector3.up, para que sea nuestra fondo, eso lo multiplicamos por el size (que en realidad es la mitad del tamaño de la caja).

finalmente, tengo 4 métodos que mueven la caja en la dirección deseada, pasándole sus respectivos vectores.

void TurningToRight(){
    TurningToDirection(Vector3.right, Vector3.back);
}

void TurningToLeft(){
    TurningToDirection(Vector3.left, Vector3.forward);
}

void TurningToFront(){
    TurningToDirection(Vector3.forward, Vector3.right);
}

void TurningToBack(){
    TurningToDirection(Vector3.back, Vector3.left);
}

Happy Coding!!

Making Off de mi juego 1

Jorge Acosta — Fri, 30 Sep 2022 15:25:37 +0000

Crear juegos es difícil, pero para quienes tenemos el sueño de plasmar lo que solo vive en nuestra imaginación, es un camino fascinante y divertido.

Quiero compartir mi proceso, en algunas entradas de este blog, para mostrar cómo voy armando mi juego, que espero terminar algún día.

En el año 2017, conceptualice a un personaje para que fuera parte de un prototipo de un juego puzzle, en el que tuvieras que explorar planetoides cúbicos.

En los primeros intentos de construir este juego, use solo assets de unity store y personalice las texturas del cubo usando una herramienta que por ese entonces no era nativa: Probuilder.

Actualmente, es una herramienta que viene incorporada en el motor de juegos unity3d, la puedes encontrar en el menu "GameObject" -> "Probuilder".

Sin embargo es una herramienta que no esta del todo pulida y tiene algunos inconvenientes a la hora de usar.

Cuando ya tenia las mecanicas del juego programadas, tuve la necesidad de meter mis conceptos artísticos al juego, diseñando mi propio personaje

En los primeros intentos, use el extinto "Fireworks" de Adobe para ilustrar a mi personaje, para finalmente llevarlo a blender.

Sin embargo este personaje nunca me convenció del todo, así que solo usando un papel diseñe un nuevo personaje, que se asemeja mucho a un druida, el protagonista tenia rasgos femeninos.

Aquí podemos ver al personaje dentro de un planetoide cubico de prueba.

Este proyecto se desecho meses después, pero la intención de retomarlo no. En diciembre pasado, volví a explorar la idea de crear un juego de puzzle, inspirado en los juegos modernos de puzzles, como monument valley o the last campfire, así es cómo vuelve a nacer el concepto del personaje pero un poco más simplificado, pero añadiendole elementos de exploración.

Sin embargo, el personaje no era tan carismático, sentía que le faltaba algo de vida, así que encontré a una diseñadora por Fiver que pudiera darme algunos tips para poder remodelar al personaje.

Así es como nace este concepto, mas estilizado, mas carismático y que tenia unas proporciones más adecuadas.

El personaje habita su mundo de forma muy coherente, se ve bien, y se mueve de forma bastante natural.

Sin embargo, por cuestiones técnicas tuve que verme en la obligación de cambiar totalmente el modelo por algo más tradicional, un Goblin o trasgo.

Un Trasgo se le gráfica habitualmente así:

Pero yo quise resignificar el concepto, dandole un aspecto más agradable, inspirandome en los hobbits de tolkien.

Primero modele el concepto integro desde el boceto 2d, pero tenia un problema: la capa. No escuche los consejos de Edna moda: ¡Sin capa!

la capa es problematica, porque deberia poder moverse naturalmente, y el personaje mueve los brazos en el juego, para activar palancas o tomar objetos, entonces la capa se vuelve un problema.

Conservando la esencia del personaje, modele un Goblin que tuviera objetos de exploración, una mochila, tiene posiones, un mapa, etc. Pero se ve como un aventurero experimentado, que puede manejar tecnología.

Mi personaje es mas sencillo, así que volví a incorporar la capa, pero esta vez, reduciendo su tamaño y restringiendo a la parte trasera, de esta forma, solo es un decorado y no interfiere con las acciones del personaje.

Modifique la morfología del personaje, para que fuera mucho mas tierno y carismático.

Este ha sido parte del viaje de mi personaje principal, ¿qué te pareció?

Seguiré mostrando mis avances en futuros posts, que muestren cómo conceptualizo, modelo y texturizo a los personajes.

Happy Coding!

Creando UI al estilo Tinder en SwiftUI Parte I: Gradientes y Botones

Jorge Acosta — Tue, 06 Aug 2019 20:24:39 +0000

Este es mi primer post sobre desarrollo mobile, mi objetivo es mostrar cómo crear interfaces complejas, es decir, que tengan micro-interacciones, interacciones con gestos, animaciones, etc.

En esta instancia mostrare como montar la interface central de Tinder, donde vas Swipeando los rostros de los pretendientes dando like o unlike

Asumiré que tienes nociones sobre Swift y que ya sabes que es SwiftUI, por tanto no explicare detalles del lenguaje y no profundizare sobre SwiftUI, por lo demás ya existen un montón de posts ahi afuera que desarrollan las nociones básica de este maravilloso Framework desarrollado por apple.

Stack

Xcode 11.0 Beta 4 (11M374r)
MacOS Catalina Versión 10.15 Beta (19A512f)
Swift 5.0

Lo primero que haremos sera revisar nuestro prototipo y extraeremos sus colores y assets principales, los agregaremos a nuestro Assets.xcassets con sus correspondientes nombres.

Construyendo el Header

SwiftUI nos presenta una forma sencilla de trabajar con gradientes: LinearGradient, RadialGradient y AngularGradient. En esta ocasión trabajaremos con Linear gradient, que es una struct que nos pide un Gradient y dos UnitPoint, inicial y final.

Gradient nos pide un array de colores, que en nuestro caso sera el del gradiente izquierdo y derecho descritos anteriormente

Gradient(colors: [Color("left_gradient_color"), Color("rigth_gradient_color")])

Un UnitPoint es un punto, imagina un plano cartesiano con las coordenadas X y Y. Puedes inicializar asi:

UnitPoint(x: 0.0, y: 0.0)

Pero tambien puedes acceder a las constantes

UnitPoint.bottom
UnitPoint.bottomLeading
UnitPoint.bottomTrailing
UnitPoint.center
UnitPoint.leading
UnitPoint.top
UnitPoint.topLeading
UnitPoint.topTrailing
UnitPoint.trailing
UnitPoint.zero

Si quieres un Gradiente que vaya de izquierda a derecha utilizarías el UnitPoint.leading y el UnitPoint.trailing, generalmente estas constantes te servirán para la mayoría de los casos en los que quieras utilizar gradientes, sin embargo siempre podrás inicializar un UnitPoint con un punto arbitrario en el plano, para lograr algo exactamente como lo que estas buscando.


import SwiftUI

struct GradientHeader: View {
    var body: some View {
          VStack{
           Text("Discover")
               .font(.system(size: 30))
               .bold()
               .foregroundColor(.white)
               .offset(x:25, y: 25)

          }
          .frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
          .frame(height: 180)
          .background(LinearGradient(gradient: Gradient(colors: [Color("left_gradient_color"),Color("rigth_gradient_color")]), startPoint: .leading, endPoint: .trailing))

    }
}

El resultado del código anterior nos dará como resultado lo siguiente

Botones

Los botones en SwiftUI son muy simples de declarar


Button("Click Me"){
//tap action
}
.frame(width:60, height:60)

Otra forma de declararlo


Button(action:{
//tap action
}){
Text("Click Me")
}
.frame(width:60, height:60)

La forma anterior nos permite agregar mas cosas, como Images, Stacks, etc

En esta imagen mostramos la modificación de un botón con cada linea de código que agrega un nuevo modificador a la vista.


Button("Click Me"){
//tap action
}
.frame(width:60, height:60)
.background(Color.white)
.mask(Circle())
.shadow(color: Color("Shadow"), radius: 4, x: 0, y: 5)

Una forma más avanzada de ordenar nuestros botones, es generar unos estilos derivados de ButtonStyle, así podremos inyectar estilos de manera fácil a nuestros botones solo referenciando sus respectivos nombres de estilos.

//button+styles.swift
import Foundation
import SwiftUI

public struct Rounded : ButtonStyle {
    public func body(configuration: Button<Self.Label>, isPressed: Bool) -> some View {
        configuration
            .background(Color.white)
            .mask(Circle())
            .shadow(color: Color("Shadow"), radius: 4, x: 0, y: 5)

    }
}

public struct Big : ButtonStyle {
    public func body(configuration: Button<Self.Label>, isPressed: Bool) -> some View {
        configuration
            .frame(width: 60, height: 60)
    }

}

extension StaticMember where Base : ButtonStyle {
    public static var rounded: Rounded.Member {
        StaticMember<Rounded>(Rounded())
    }
    public static var big: Big.Member {
       StaticMember<Big>(Big())
   }
}

Aislando nuestros estilos como se muestran anteriormente, nos queda una composición de nuestro botón de manera mas limpia, con la aventaja añadida que podemos combinar estilos, aquí podemos ver como combinamos el estilo de un botón grande con el de un botón redondeado.

//Crea un nuevo Documento SwiftUI
import SwiftUI

struct ContentView: View {

    var body: some View {
        Button("Click Me!"){
          //Tap Code!!   
        }
        .buttonStyle(.rounded)
        .buttonStyle(.big)

    }
}

Una vez que hemos codeado nuestro botón, crearemos una Vista que contenga todos nuestros botones, intercalando los botones pequeños y grandes como muestra nuestro prototipo, los botones de los costados tienen un pequeño desfase hacia arriba.


//Buttons.swift

import SwiftUI

struct Buttons: View {

    var body: some View {

          HStack(alignment: .center){

             Button(action:{}){
               Image("redo")
                 .resizable()
                 .frame(width: 22, height: 22)
                 .foregroundColor(Color("redo"))
              }
              .buttonStyle(.rounded)
              .buttonStyle(.small)
              .offset(y:-14.0)

              // Agregar los otros 4 botones, intercalando .small y .big 
              // solo los botones de los costados tienen offset y : -14
           }
           .padding(.bottom, 35)
           .frame(minWidth:0, maxWidth:.infinity)
    }
}

El resultado de generar los botones de esta manera

Conclusión

Desarrollar vistas con SwiftUI es realmente sencillo, los desarrolladores Swift agradecerán la forma coherente que tiene SwiftUI de utilizar la potencia del lenguaje con sus nuevas características. Una cosa interesante de observar es lo parecido con react native, a los desarrolladores que vengan de este mundo, les resultara muy familiar la forma en que se construyen las interfaces; Quizás sea una excelente oportunidad para explorar el mundo del desarrollo nativo.

Se agradece cualquier critica que puedan dejar, ademas de compartir el post con desarrolladores interesados en el desarrollo Mobile.

Anexare el proyecto de Github con los contenidos del tutorial:

Repositorio Github

Tag con el avance de este post