{"id":4215,"date":"2020-12-01T21:39:47","date_gmt":"2020-12-02T02:39:47","guid":{"rendered":"https:\/\/niixer.com\/?p=4215"},"modified":"2020-12-01T21:42:11","modified_gmt":"2020-12-02T02:42:11","slug":"blippar-tutorial-para-el-juego-concentrese","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/","title":{"rendered":"BlippAR: tutorial para el juego “\u00a1Concentrese!”"},"content":{"rendered":"\n

Las herramientas que se tienen hoy en d\u00eda para crear productos de realidad aumentada permite que todos podamos probar nuevas experiencias d\u00eda tras d\u00eda.<\/p>\n\n\n\n

En este peque\u00f1o tutorial, te explico como hacer uso de la herramienta BlippAR, para crear un peque\u00f1o juego muy divertido y popular denominado “\u00a1Concentrese!”, as\u00ed que vamos a empezar.<\/p>\n\n\n\n

Paso 1: Registro<\/h3>\n\n\n\n

Ingresar a la p\u00e1gina https:\/\/www.blippar.com\/<\/a> y realizar el registro en la p\u00e1gina, dirigi\u00e9ndose a la opci\u00f3n \u201cLogin\u201d:<\/p>\n\n\n\n

<\/p>\n\n\n\n

Una vez dado click, la p\u00e1gina remite a un formulario donde se puede iniciar sesi\u00f3n o realizar registro. Tomamos la segunda opci\u00f3n:<\/p>\n\n\n\n

\n
\n

<\/p>\n<\/div>\n\n\n\n

\n

<\/p>\n<\/div>\n<\/div>\n\n\n\n

Paso 2: Inicio de sesi\u00f3n<\/h3>\n\n\n\n

Una vez registrado, se puede realizar directamente el inicio de sesi\u00f3n a Blippar, ingresando el correo y la contrase\u00f1a registrados previamente:<\/p>\n\n\n\n

<\/p>\n\n\n\n

Paso 3: Inicio del proyecto<\/h3>\n\n\n\n

Una vez  hecho el logueo, saldr\u00e1n 2 ventanas con las cuales se podr\u00e1 iniciar a construir el proyecto. Seleccionamos  la opci\u00f3n de fondo rojo que dice \u201cCreate an App AR\u201d:<\/p>\n\n\n\n

<\/p>\n\n\n\n

Saldr\u00e1n dos opciones diferentes: \u201cStart from scratch\u201d y \u201cUse scripting\u201d. Se da click en la opci\u00f3n n\u00famero 1:<\/p>\n\n\n\n

<\/p>\n\n\n\n

Realizado lo anterior, se debe subir una imagen que servir\u00e1 de marcador para poder empezar a construir el proyecto. Se puede arrastrar la imagen sobre la ventana que solicita la imagen. La imagen a usar de marcador debe tener un formato jpeg. Podemos renombrar el proyecto si se quiere. En este caso, la imagen subida ha sido generada en la p\u00e1gina www.photopea.com<\/a> : Finalmente se da click en \u201cContinuar\u201d:<\/p>\n\n\n\n

\n
\n

<\/p>\n<\/div>\n\n\n\n

\n

<\/p>\n<\/div>\n<\/div>\n\n\n\n

Paso 4: Construcci\u00f3n del juego<\/h3>\n\n\n\n

Interfaz del juego<\/h4>\n\n\n\n

Una vez realizado lo anterior, se observar\u00e1 el siguiente entorno:<\/p>\n\n\n\n

<\/p>\n\n\n\n

En el costado izquierdo se encuentran los widgets y los elementos, o \u201cSprites\u201d disponibles para insertar en el \u00e1rea de trabajo. Insertamos un Sprite vac\u00edo, y le a\u00f1adimos la textura de la tarjeta con la imagen de la estrella:<\/p>\n\n\n\n

\n
\n

<\/p>\n<\/div>\n\n\n\n

\n

<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

<\/p>\n<\/div>\n\n\n\n

\n

Nota: La imagen de la tarjeta es subida desde la pesta\u00f1a \u201cAdd new\u201d, como se muestra en la imagen anterior.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

Hecho esto, replicamos el mismo componente 5 veces  m\u00e1s para generar las tarjetas de juego:<\/p>\n\n\n\n

<\/p>\n\n\n\n

Configuramos cada tarjeta con la posici\u00f3n en el eje Z igual a 30, para generar el efecto aumentado de forma notoria:<\/p>\n\n\n\n

\n
\n

Esto se repite seleccionando cada sprite y modificando su posici\u00f3n en Z.<\/p>\n<\/div>\n\n\n\n

\n

<\/p>\n<\/div>\n<\/div>\n\n\n\n

Una vez se completa lo anterior, procedemos a cambiar el nombre de la escena. Se selecciona la opci\u00f3n Escena 1 y se modifica el nombre para tener una referencia de la escena:<\/p>\n\n\n\n

<\/p>\n\n\n\n

Mec\u00e1nica del juego<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Como puede notarse, se cambi\u00f3 el nombre de la escena a \u201cInicial\u201d, y se ven 60 escenas creadas. El juego funciona haciendo que los sprites cambien entre escenas hasta que se logre llegar a la meta. Se crean 6 escenas adicionales:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Para cada escena, se cambiar\u00e1 un elemento de los sprites colocados en el \u00e1rea de trabajo:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Y as\u00ed sucesivamente, formando las parejas. N\u00f3tese que la escena va cambiando a medida que se cambia una Tarjeta estrella por un modelo 3D, tomado de la parte izquierda de la herramienta.<\/p>\n\n\n\n

Para que el cambio entre escenas funcione, debemos hacer click en el sprite a manipular, y en las opciones del sprite usar la funci\u00f3n \u201cOn touch\u201d. En esta, se selecciona la opci\u00f3n \u201cGo to scene\u201d y finalmente se escoge la escena a la que se quiere pasar:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Y as\u00ed para cada uno de los elementos del \u00e1rea de trabajo.<\/p>\n\n\n\n

Tambi\u00e9n se debe configurar el paso entre escenas para indicar si la pareja es correcta o incorrecta. para ello, deben generarse todas las escenas correspondientes a todos los posibles escenarios que puedan darse:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

En escenas donde el jugador se equivoque, se ver\u00e1 lo siguiente:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Este sprite de texto permite retornar a la escena principal. Por el contrario, si la pareja es correcta, se ve lo siguiete:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

El sprite de texto indica que se hall\u00f3 la pareja, y al tocarse se redirige a una nueva escena, donde no se encuentran las tarjetas que el jugador ha encontrado:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Esta misma l\u00f3gica se repite hasta el fin del juego.<\/p>\n\n\n\n

Paso 5: Fin del juego<\/h1>\n\n\n\n

Al terminar, se ve lo siguiente:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Desde aqu\u00ed pueden verse los sitios de los cuales fueron tomados los elementos para dise\u00f1ar el juego y tambi\u00e9n se puede reiniciar el juego.<\/p>\n\n\n\n

Paso 6: Probar la experiencia<\/h3>\n\n\n\n

Ingresar a Google Play store para  Android, descargar e instalar  la app Blippar:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Ingresar al aplicativo, ir a la opci\u00f3n de configuraci\u00f3n, seleccionar la opci\u00f3n \u201cIntroduce un c\u00f3digo promocional\u201d e ingresar el c\u00f3digo que se ve en la imagen:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Buscar  la siguiente imagen:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Con la App abierta, enfocar la imagen anterior y dar click en \u201cTap to scan\u201d:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Autor: Nicol\u00e1s Esteban Echeverri S\u00e1nchez<\/a><\/p>\n\n\n\n

Editor: Carlos Pinz\u00f3n<\/p>\n\n\n\n

C\u00f3digo:UCRV-8<\/p>\n\n\n\n

Universidad: Universidad Central<\/p>\n\n\n\n

Referencias<\/h1>\n\n\n\n
Tarjetas.Me. (2020). Tarjeta Estrella Meli\u00e1 <\/em>[Imagen]. Tarjetas.Me. https:\/\/tarjetas.me\/estrella\/<\/a>\n<\/pre>\n\n\n\n
rawpixel.com. (2018). Bloques coloridos en vector de fondo blanco en blanco vector gratuito [Imagen]. freepik. https:\/\/www.freepik.es\/vector-gratis\/bloques-coloridos-vector-fondo-blanco-blanco_3601260.htm<\/a><\/pre>\n\n\n\n
Blippar.com.(s.f). blippar logo <\/em>[Imagen]. blippar. https:\/\/www.blippar.com\/<\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Las herramientas que se tienen hoy en d\u00eda para crear productos de realidad aumentada permite que todos podamos probar nuevas experiencias d\u00eda tras d\u00eda. En este peque\u00f1o tutorial, te explico como hacer uso de la herramienta BlippAR, para crear un peque\u00f1o juego muy divertido y popular denominado “\u00a1Concentrese!”, as\u00ed queSeguir Leyendo<\/p>\n","protected":false},"author":50,"featured_media":4315,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[55],"tags":[808,324,65],"class_list":["post-4215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-realidad-aumentada","tag-blippar","tag-juegos","tag-realidad-aumentada"],"yoast_head":"\nBlippAR: tutorial para el juego "\u00a1Concentrese!" – -Niixer<\/title>\n<meta name=\"description\" content=\"En este tutorial aprenderemos a realizar un peque\u00f1o juego de Concentrese, utilizando la herramienta de realidad aumentada BlippAR\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BlippAR: tutorial para el juego "\u00a1Concentrese!" – -Niixer\" \/>\n<meta property=\"og:description\" content=\"En este tutorial aprenderemos a realizar un peque\u00f1o juego de Concentrese, utilizando la herramienta de realidad aumentada BlippAR\" \/>\n<meta property=\"og:url\" content=\"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/niixer\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-02T02:39:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-02T02:42:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/niixer.com\/wp-content\/uploads\/2020\/12\/share-banner.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nicolas Esteban Echeverri Sanchez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nicolas Esteban Echeverri Sanchez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"BlippAR: tutorial para el juego \"\u00a1Concentrese!\" – -Niixer","description":"En este tutorial aprenderemos a realizar un peque\u00f1o juego de Concentrese, utilizando la herramienta de realidad aumentada BlippAR","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/","og_locale":"es_ES","og_type":"article","og_title":"BlippAR: tutorial para el juego \"\u00a1Concentrese!\" – -Niixer","og_description":"En este tutorial aprenderemos a realizar un peque\u00f1o juego de Concentrese, utilizando la herramienta de realidad aumentada BlippAR","og_url":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/","og_site_name":"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","article_publisher":"https:\/\/www.facebook.com\/niixer\/","article_published_time":"2020-12-02T02:39:47+00:00","article_modified_time":"2020-12-02T02:42:11+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/niixer.com\/wp-content\/uploads\/2020\/12\/share-banner.jpg","type":"image\/jpeg"}],"author":"Nicolas Esteban Echeverri Sanchez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Nicolas Esteban Echeverri Sanchez","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/#article","isPartOf":{"@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/"},"author":{"name":"Nicolas Esteban Echeverri Sanchez","@id":"https:\/\/niixer.com\/#\/schema\/person\/ec3939f7484a87cfa9cfcaa9f8eb375d"},"headline":"BlippAR: tutorial para el juego “\u00a1Concentrese!”","datePublished":"2020-12-02T02:39:47+00:00","dateModified":"2020-12-02T02:42:11+00:00","mainEntityOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/"},"wordCount":819,"commentCount":0,"publisher":{"@id":"https:\/\/niixer.com\/#organization"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2020\/12\/share-banner.jpg","keywords":["Blippar","Juegos","Realidad Aumentada"],"articleSection":["Realidad Aumentada"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/","url":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/","name":"BlippAR: tutorial para el juego \"\u00a1Concentrese!\" – -Niixer","isPartOf":{"@id":"https:\/\/niixer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/#primaryimage"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2020\/12\/share-banner.jpg","datePublished":"2020-12-02T02:39:47+00:00","dateModified":"2020-12-02T02:42:11+00:00","description":"En este tutorial aprenderemos a realizar un peque\u00f1o juego de Concentrese, utilizando la herramienta de realidad aumentada BlippAR","breadcrumb":{"@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/#primaryimage","url":"https:\/\/niixer.com\/wp-content\/uploads\/2020\/12\/share-banner.jpg","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2020\/12\/share-banner.jpg","width":1200,"height":630,"caption":"blippar"},{"@type":"BreadcrumbList","@id":"https:\/\/niixer.com\/index.php\/2020\/12\/01\/blippar-tutorial-para-el-juego-concentrese\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/niixer.com\/"},{"@type":"ListItem","position":2,"name":"BlippAR: tutorial para el juego “\u00a1Concentrese!”"}]},{"@type":"WebSite","@id":"https:\/\/niixer.com\/#website","url":"https:\/\/niixer.com\/","name":"Portal de noticias de tecnolog\u00eda, ciencia, Android, iOS, Realidad Virtual, Aumentada y Mixta, Videojuegos, computadores, todo lo mas reciente en tecnolog\u00eda","description":"Portal de noticias de tecnolog\u00eda","publisher":{"@id":"https:\/\/niixer.com\/#organization"},"alternateName":"Niixer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/niixer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/niixer.com\/#organization","name":"Niixer","alternateName":"Niixer.com","url":"https:\/\/niixer.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","width":140,"height":140,"caption":"Niixer"},"image":{"@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/niixer\/","https:\/\/www.instagram.com\/niixer.tecnologia\/"]},{"@type":"Person","@id":"https:\/\/niixer.com\/#\/schema\/person\/ec3939f7484a87cfa9cfcaa9f8eb375d","name":"Nicolas Esteban Echeverri Sanchez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/0fb814a05ffeccf7af8a8a6c68a8a9649fc04d9e52227d64ce7e60648e75b4ca?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0fb814a05ffeccf7af8a8a6c68a8a9649fc04d9e52227d64ce7e60648e75b4ca?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0fb814a05ffeccf7af8a8a6c68a8a9649fc04d9e52227d64ce7e60648e75b4ca?s=96&d=mm&r=g","caption":"Nicolas Esteban Echeverri Sanchez"},"sameAs":["http:\/\/www.niixer.com"],"url":"https:\/\/niixer.com\/index.php\/author\/necheverris\/"}]}},"jetpack_featured_media_url":"https:\/\/niixer.com\/wp-content\/uploads\/2020\/12\/share-banner.jpg","_links":{"self":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/4215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/comments?post=4215"}],"version-history":[{"count":2,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/4215\/revisions"}],"predecessor-version":[{"id":4317,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/4215\/revisions\/4317"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media\/4315"}],"wp:attachment":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media?parent=4215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/categories?post=4215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/tags?post=4215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}