Novo Proxecto II. Survival Shooter

Hola a todos de novo! No artigo anterior díxenvos que iba realizar un novo proxecto que consistía na creación dun xogo co programa Unity. Este xogo chámase Unity e nesta entrada e nas próximas explicareivos como o fun creando.
Hoxe vou empezar por explicarvos o gráficos principais que é lugar onde se sitúa o xogo, cuxo lugar é unha habitación infantil, con xoguetes tirados polo solo e demais cousas. Entón comencemos :)

Paso Nº1:

Para crear este xogo tes que descargar un zip que contén os recursos e ajustes. A páxina dende o descarguei e esta. Xa na páxina tes que clicar no botón verde que pon "Clown or download" e nel aparecerache unha ventana onde tes clicar no botón de "Download ZIP".
Unha vez descargado terás que ter estas carpetas e archivos:

Logo tes que abrir o Unity e abrir os archivos que descargaches anteriormente:

Despois tes que clicar na tecla File e logo clicar en Save Scene as para poder gardar a primeira parte do proxecto como Level 01.

Paso Nº2:

Agora comezamos a crear o noso xogo. Primeiro colocaríamos os muebles. Para iso tes que ir á carpeta Prefabs e arrastrar a opción de environment cara a pestaña de Level 01. Logo na mesma carpeta poñemos as luces, neste caso sería a opción Lights. Isto pódelo poñer ao teu gusto, eu por exemplo cambiei algúns muebles de sitio.

Paso Nº3:

A continuación, colócase unha cámara de fondo para que os teus xogadores poidan desprazarse e disparar. Para iso tes que ir a GameObject, a continuación a 3D Object e colocar un Quad. Unha vez colocado o Quad, cámbiaselle o nome por Floor e a continuación pasas a axustar a posición, a rotación e a escala da cámara como se che indica na seguinte foto:

 Despois de isto, o solo vaiche aparecer blanco e para sacar iso tes que ir Mesh Collider e ahí no dibuxo de ajustes tes que clicar na opción de Remove Companent.

 Por último en Layer tes que ter a opción Floor para así che quede fixado a cámara de fondo.

 Paso Nº4:

Por último, a múscia de fondo. Para introducila tes que crear un novo obxecto na opción de GameObject e clicar en Create Empty. Logo tes que cambiarlle o nome por Background Music.

 A continuación, colocamos o sonido no obxecto. Clicamos en AddComponent, logo en audio e e prememos en Audio Souce.

 Logo en AudioClip clicamos no botón dereito de todo para abrir a pestaña cos sonidos e así poñer o que desexemos. Eu o que puxen foi o de Background Music.

 Por último, sacamos o tick de Play on awake e poñémolo en Loop. Logo cambiamos o volume e poñémolo a 0.101

 E xa teríamos o volume posto.

Pois isto foi o primeiro tutorial. Espero que vos sirva de algo. Un saúdo :)

Novo Proxecto

Hola de novo! Estou a piques de crear un novo proxecto que consiste nun videoxogo. Para iso hoxe vouvos ensinar algúns programas gratuitos que hai e vouvos mostrar como se descarga o que elixín eu.

Programas gratis para crear videoxogos:

 -Stencyl: Programa gratuito para a creación de videoxogos en 2D para desktop, web e dispositivos móviles.

 

 -GDevelop: Este programa permíteche crear videoxogos sen necesidade de saber programar ou escribir códigos.

 

   

-Scratch: É un programa gratuito e libre de software.

 

-Game Maker Studio: É un plataforma moi fácil de usar e cunha capacidade de crear videoxogos en pouco tempo.

  

-Construct: Plataforma que che permite crear videoxogos en 2D sen necesidade de ter coñecementos de programación en HTML5.

 

-Flixel: É unha plataforma programada en ActionScript 3, a cal che permite a creación dunha gran diversidade de videoxogos de forma fácil e sinxela.

 

 -Unity: Este programa permíteche crear videoxogos en 2D e en 3D en máis de vinte e unha plataformas diferentes.

Eu, persoalmente, elixín o último, aunque todos os programas de aquí teñen boa pinta.

Agora vouvos explicar como descarguei este programa no meu pc.
Simplemente tendes que premer aquí e xa vos levaría directamente a páxina onde podedes elixir o modo que queredes descargar. Eu escollín o persoal que é o gratis, aínda que podedes escoller os outros para ter o programa completo.

Logo de premer na opción que queiras clicas en descargar ou conseguir, dependendo do que elixas. Eu vouvos ensinar a opción gratuita.

Logo de premer ahí, daslle a descargar instalador e despois de descargarse aparecerache esta ventana, onde terás que premer o botón de guardar archivo.

 Despois daslle a instalar o programa e tenche que aparecer isto, onde lle tes que dar a Next.

 

Logo de darlle, aparecerache esta pantalla onde lle tes que dar a que aceptas os términos e despois clicas en Next.

Logo terás que clicar na opción na que aparece 64 bits, porque é a recomendada, e despois a Next.

Despois vaivos aparecer outra pantalla na que xa se vos pon automaticamente as opcións do programa adaptadas ao teu ordenador e simplemente téndeslle que dar a Next.
Despois de iso, apareceravos a opción de elixir onde queres que se che descargue o teu programa.
Selecionádelo e dádeslle a Next.

Despois tendes que aceptar os termos e darlle de novo a Next.

E agora esperar a que se descargue e daslle a Finish e logo daslle a permitir acceso.
E xa terías o teu programa descargado.

Unha vez descargado creas unha cuenta Unity e logo de creala, pos os teus datos no teu programa. Xa posto o teu correo e contrasinal, na lincencia daslle a opción que elixiras, no meu caso puxen Unity persoal. Logo aparéceche un recuadro onde lle tes que dar á última opción e por último darlle a Next e acabar de escribir os teu datos.

E xa poderías comezar creación do teu videoxogo. Espero que vos servira de algo. Un saúdo :)

Proxecto final V

Ola! Hoxe vouvos ensinar o resultado final de este proxecto, que despois de moito tempo e moitos cambios, conseguimos rematalo. Para poder descargalo tendes que clicar aquí e así podedes acceder a todo o test. Eu encargueime de facer as páxinas, enlazalas entre si, de centrar o texto, de facer os botóns, de facer o styles e o scripts e tamen me encarguei de colocar as fotos dos personaxes. A mayor parte das cousas xa as expliquei nos outros artigo menos o de como colocar as imaxes.
Para colocar imaxes nas túas páxinas html emprégase este código:

<img src="A túa imaxe.jpg" width="200px">

Ten que estar en formato .jpg aunque tamen podes tela en formato .png
Despois de colocar este código teríache que quedar unha cousa así:

E este sería o resultado. Espero que vos guste o test e que este artigo vos servira de algo. Un saúdo :)

Proxecto final IV

Ola! Seguimos aínda co proxecto final e cada día engadíndolle máis cousas. Hoxe vouvos mostrar un novo código que lle puxemos ás nosas páxinas para que se vexa un pouco máis centrado. Aquí tendes este código:

<center><body>...</body></center>

O <center> serve para centrar o que ti escibas.

Este código debes colocalo antes de <body> e despois de </body>, como se mostra no recadro de arriba.

Con el as páxinas vense moito mellor. Espero que vos sirva de algo. Un saúdo :)

Proxecto final III

Ola! Hoxe vouvos mostrar unha continuación do proxecto final. Tivemos unha serie de problemas co traballo e case a última hora, tivemos que borralo case todo e volvelo a facer. Agora acurtámolo máis e reorganizámosnos un pouco mellor. Eu agora fago o que ven sendo a estructura das páxinas e o enlace entre elas, miña compañeira Ariadna crea as preguntas e as respostas para cada páxina e a miña outra compañeira Gemma encárgase do estilo da páxina e das imaxes.
Agora solo vai ser un test de cinco preguntas que levan á personaxe Disney que encaixa máis coa túa personalidade. Nos anteriores artigos solo vos mostrei como era a páxina pero hoxe veño enseñarvos como enlazar unha páxina con outra a través dun botón.

<h3><a href="A páxina que queres que se enlace">Aquí</a></h3>

Isto é para que ao clicar na palabra ou frase que ti escribas (onde aparece Aquí)te leve a esa páxina que tiveches que poñer antes.

<h3><button class="btn" type"button" onclick="funcionCambiadora()"></h3>

Isto é o código para aplicar un botón.

<h3><a href="A páxina que queres que se enlace"><button class"btn" type"button" onclick="funcionCambiadora()">Aquí</a></h3>

Isto é para enlazar unha páxina con outra a través dun botón.

No noso traballo introducimos o terceiro código para que cando cliques nunha resposta te leve á seguinte páxina que é a seguinte pregunta.
Espero que vos sirva de algo. Un saúdo :)

Proxecto final II

Ola! Hoxe veño comentarvos o que fixemos esta semana miñas compañeiras e eu. Como ben dixen no artigo anterior estamos facendo un proxecto final que consiste nun test para saber que princesa Disney eres. Tivemos facendo as primeiras preguntas do test as cales levaron moito traballo, porque precisamente non son poucas. Eu fixen as cuartas preguntas que son as respuestas das terceiras posibles respuestas. De momento solo levo catro preguntas de tres respuestas terceiras. Agora vou comezar coas últimas catro preguntas e logo pasar as séprtimas preguntas cando as miñas compañeiras leven feito as anteriores. A verdade e que esto é moi lioso e custa moito facelo, porque son moitas páxinas enlazadas entre si, pero esperamos que quede bastante ben.
A continuación deíxovos o que levo feito en atom para que vos déades unha idea do lioso que pode chegar a ser.

Isto é a primeira pregunta da primeira resposta da terceira pregunta:

Isto é a segunda pregunta:

 

Isto é a terceira pregunta:

 

E isto é a cuarta pregunta:

Espero que vos siga de algo. Un saúdo :)

Proxecto final

Ola! Hoxe tráiovos un parte do proxecto que estou facendo coas miñas compañeiras Gemma e Ariadna. O noso proxecto consiste na creación dun test que se elaborou na aplicación de Atom. Por desgraza non nos dou tempo a acabalo pero algo polo menos fixemos. A miña parte consistía na páxina incial do test. Aquí vos deixo unha foto:

Como podedes ver non está acabado, pero igualmente móstrovos o código dese botón e da páxina.
Este é o código da páxina:

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<title>Test¿Que personaje Disney eres?</title>
</head>


<body>
<h1>¿Quieres saber que personaje Disney eres?</h1>
<h3><a href="preg1.html"><button class="btn"  type="button" onclick="funcionCambiadora()">¡Pues empecemos!</button></a></h3>
</body>
</html>



Esa é a estructura e o botón dirixe á primeira pregunta, que é a que fixo unha das miñas compañeiras.
O estilo da páxina, creado nunha páxina chamada styles.css é o seguinte:

body{background-image: url("Images/Portada.jpg");}

p {    border-radius: 25px;
    padding: 2px;
    width: 20px;
    height: auto;
  font-family: 'Indie Flower', cursive;

    display:block;
    margin-top: 5px;
    margin-left:10px;
    margin-right:auto;

        }


h1 {        color:white;
        border-radius: 25px;
          padding: 2px;
           width: 2000px;
            height: 75px;
    front-size:55px;
        font-family: 'Gloria Hallelujah', cursive;



            }

h2 {        color:black;
        border-radius: 25px;
            background: white;
            padding: 20px;
           width: 500px;
            height: 75px;
    front-size:100px;
        font-family: 'Glorie Hallelujah', cursive;

display:inline-table;
margin-right:10px;

            }


h3{         color:white;
                font-family: 'Indie Flower', cursive;}




img {    display:block;
    margin:10px;
        }

Con esto terías a páxina diseñada como a teño eu, pero sempre podes cambiar a aparaiencia.
Por último, fixen o botón que por desgraza, doume moito traballo debido a que non sabía como enlazar ese botón con outra páxina html.
O botón creeino nesta páxina, e o código que me dou pois collino e copieino no styles.css
 Igualmente deíxovos o código do meu botón:

     .btn {
        background: #d934a7;
        background-image: -webkit-linear-gradient(top, #d934a7, #2980b9);
        background-image: -moz-linear-gradient(top, #d934a7, #2980b9);
        background-image: -ms-linear-gradient(top, #d934a7, #2980b9);
        background-image: -o-linear-gradient(top, #d934a7, #2980b9);
        background-image: linear-gradient(to bottom, #d934a7, #2980b9);
        -webkit-border-radius: 28;
        -moz-border-radius: 28;
        border-radius: 28px;
        text-shadow: 5px 4px 2px #0021fa;
        -webkit-box-shadow: 0px 1px 3px #ffffff;
        -moz-box-shadow: 0px 1px 3px #ffffff;
        box-shadow: 0px 1px 3px #ffffff;
        font-family: Georgia;
        color: #ffffff;
        font-size: 49px;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
      }

      .btn:hover {
        background: #3ca1fa;
        background-image: -webkit-linear-gradient(top, #3ca1fa, #34d960);
        background-image: -moz-linear-gradient(top, #3ca1fa, #34d960);
        background-image: -ms-linear-gradient(top, #3ca1fa, #34d960);
        background-image: -o-linear-gradient(top, #3ca1fa, #34d960);
        background-image: linear-gradient(to bottom, #3ca1fa, #34d960);
        text-decoration: none;
      }
E esto sería todo, espero que vos gustase. Un saúdo ;)