Transform-Origin e SVG

Desafios do dia dia: (Contexto Web, e seus diversos Browsers)

  • Fazer uma reta aparecer suavemente da sua origem para seu destino.
  • Fazer algo rodar a partir de sua origem
  • Alterar a origem das transformações
  • Manter proporção

Entre outros desafios…
A forma mais simples, usando CSS Animations com Divs, funcionam bem na maioria dos browsers, para animações que não precisem mudar proporção (Fixas), senão acabam envolvendo várias imagens com media queries.
Aí aparecem algumas vantagens de se usar SVG, para posicionar e para desenhar elementos que mantenham proporção sem distorção, ainda não explorei esta forma com dispositivos móveis na parte nativa, mas na parte web, funciona.

Alguns bons exemplos de problemas resolvidos com SVG.

Um pouco de SNAP.svg:

Exemplo comparativo: Snap , Velocity, GSAP

 

Agora sim … Um excelente Vídeo explicando problemas e com solução GSAP.

Problemas:

problemasTransform-origin.png

Simplificando, na forma simples com CSS Animations e SVG,
funciona bem no Chrome e no Safari; já no IE e no Firefox encontramos alguns problemas.

Outras soluções:

 

A intenção era apenas fazer subir e descer o termômetro ao clicar nele.
O outro teste foi de compatibilidade entre os browsers com o stroke-dasharray ,
stroke-dashoffset , funciona na maioria menos no IE11…

Aqui quase funcionou: No IE11 o comportamento foi diferente…

http://jsfiddle.net/z8w4vuau/50/

****Infelizmente , nesse exato momento 04/05/2016, a Web Animation API (WAAPI), ainda não funciona para todos browsers, porém no modo simples com o polyfill, funciona …
Mas ainda não funciona com SVG.

Então vamos por partes;
para solucionar boa parte dos problemas, use o GSAP …
Para solucionar o problema de fazer uma reta da sua origem a um destino;
vou usar o CSS padrão, e não usar o SVG…
Uma parte interessante de se usar HTML é que podemos misturar bastante
os recursos, chegando em bons resultados.

Segue um exemplo básico: Com CSS e Divs.

 

Uma outra solução foi carregar partes de um SVG em divs, e animar com CSS padrão.
Porém é algo um pouco trabalhoso.
Segue uma imagem de algo assim…
gameSVG.jpg

Vi uma vez a Rachel Nabors, misturando SVG com PNG, onde o traço era feito com SVG , e a pintura com PNG super comprimido. Excelente Exemplo dos poderes SVG e Divs normais e
WAAPI😀 (https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/web-animations-next.min.js)

 

 

 

 

 

 

 

#GGJ16 – Ritual Run

Em uma certa quinta feira, véspera da Game Jam, decido ir sozinho conhecer de perto a Jam na PUC PR, ao menos correr pra me inscrever antes do fim do período de inscrição, que era até sexta ao 12:00.
Tranquilo, o processo todo é via WEB, só seguir as instruções, e ir achando os sites onde você precisa se registrar. Eu fui atrás do site oficial da Game Jam, (http://globalgamejam.org/) , de lá você procura a Cidade que quiser participar, http://www.ggjcwb.com/2016/02/estat2016/ . Emitia um ticket para validar no local, e só imprimir e seguir as recomendações, alias excelentes.

Dicas do que precisa levar, tinha até checklist, e utilitários pra baixar pra ajudar no desenvolvimento do jogo, atuei nessa parte mais como observador e admirador da organização do evento. Aproveitei para ver um depoimento de um participante da Unity, em o quanto a gente aprende, colaborando.
Pois é hora de me mexer, pois as 16:30 de sexta feira, começava o credenciamento, e aos primeiros tinha brindes, como calouro eu não queria perder nada, consegui um Kit Chiclete da Unity, que depois descobri que era uma massinha de modelar, ainda bem que não deu tempo pra mascar ela😀 …
Pedi pra sair antes no serviço, ai ai la vai horas pra compensar depois, mas a causa é nobre,
sai correndo e cheguei no horário com pouca fila.
Foto da Fila…
20160129_162757
Acreditem, tinha fila😀. 3 filas separadas em ordem alfabética, peguei a minha e segui :D…
Eram separadas para quem era Amigo da Jam, ops essa era a quarta fila, e não gostei do nome no início, significa que a pessoa contribuiu com o Evento e adquiriu uma camisa, por 15R$. Eu comecei como Inimigo da Jam, e calouro.

O pessoal já estava preparado com o Kit Jammer, Mochilas e máquinas, sacos de dormir, lanchinhos, etc … Uau, todos organizados, e eu nem arrumei minhas coisas ainda…
Jóia, mais estímulo pra correr 16:50 já … UPS, esqueci que tinha que ajudar em casa com a compra de produtos para uma entrega de encomenda de doces da esposa , OK tranquilo, foco, acredita que da pra chegar antes de terminarem o primeiro jogo…
Bom, como já estava credênciado, e com brinde, o lance era chegar até as 18:00 onde tudo iria começar, pra tentar encontrar alguma equipe. Então é bem recomendado chegar cedo e se organizar antes para não passar apertos e chegar esgotado. Tive todo apoio da esposa e filho, fundamental para acreditar e encarar o desafio, e procurei estar calmo…
E deu tudo muito certo, fiz as compras, arrumei minha mochila básica, chinelo , escova de dentes, roupas extras, um blusa pro frio, a a máquina e seus periféricos, detalhe: tinha o desktop para levar … só carregar e ir.
Um pouco de transito na BR, mas tudo bem, creio que as 18:30 eu estava lá, e o pessoal estava tendo palestra sobre a Intel e o Real Sense. O auditório estava cheio, mas encontrei meu lugarzinho, já comecei as integrações com o pessoal, perguntando tudo que podia.
20160129_185526
Depois fomos tirar foto do pessoal e fazer o vídeo de início da Global Game Jam Curitiba.
Após, tinha que procurar o Cara do Chapéu Verde, onde iria reunir o pessoal sem equipe como eu, e tinha poucos, creio que uns 9, não contei… Mas o povo se organiza muito rápido.
Quem é programador ?! Artista ?! Gosta de puzzle ?! E algumas equipes vieram coletar novos integrantes, foi ai que a equipe Capturados me encontrou, a experiência fica muito melhor em equipe e começou a correria … Depois escrevo mais se alguém quiser😀
Pessoal desenvolvendo:
Segue os links para o jogo: Fontes e Instalador.
Da pra jogar a versão WebGL, em PCS (Ainda não funciona em celulares)
menu_18

 

Compilando para Windows 10. (Erros Unity 5.2.1f1 – UWP 10) (Solucionado Correção 5.2.1p3)

Correção: Com o path 5.2.1p3 este problema não ocorreu.
Pacote gerado sem problemas e sem necessidade de nenhuma correção.

http://unity3d.com/pt/unity/qa/patch-releases
———————————————————————————————-
Compilando com a Unity 5.2.1f1 …
Não está gerando app para Windows Store – Universal 10.
Mas gera para UWP 8.1 …

O aplicativo teste foi gerado para WebGL e foi gerado um APP para testes:
http://guimagames.azurewebsites.net   (Lights out)
build

Erros:
Assets\Scripts\levelHandler.cs(8,2): error CS0433: The type ‘XmlDocument’ exists in both ‘System.Xml.XmlDocument, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’ and ‘WinRTLegacy, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null’

Assets\Scripts\levelHandler.cs(9,2): error CS0433: The type ‘XmlNodeList’ exists in both ‘System.Xml.XmlDocument, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’ and ‘WinRTLegacy, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null’

Error building Player because scripts had compiler errors

erros

Cheguei a dar uma pesquisada nos foruns e até “vi” comentários que esta versão ainda não gera para windows 10, que apenas a versão PRO geraria.

Vou dar uma olhada melhor nestes materiais, e consultar o pessoal😀
Se puderem ajudar agradeço…

Parte da solução a ajustar:
http://docs.unity3d.com/Manual/windowsstore-missingtypes.html

Mais do mesmo problema:
http://forum.unity3d.com/threads/unity-5-2-universal-10-build-bug.353931/

http://wakeupandcode.com/publish-a-windows-10-game-with-unity-5/

https://www.microsoftvirtualacademy.com/en-US/training-courses/building-windows-10-games-with-unity-5-12572?l=EJJiCpxPB_8401937557

Novo jogo: Lights out – #Unity3d #WebGl #apk

Boa noite pessoal.
Jogo “Lights out” publicado para testes, no portal Guima Games.

lightsoutDemo

Como funciona ?
*São 10 fases, onde o jogador deve “apagar” todas caixas, para passar de fase.
Detalhe, ao clicar em uma caixa, ela apaga as filhas ao redor em cruz, e ela mesma.

Versão Web e APK (Android) disponíveis:
http://guimagames.azurewebsites.net

Este jogo foi desenvolvido seguindo o tutorial do site #DigitalTutors #MobilePuzzleGame.
http://www.digitaltutors.com/

Este projeto serve como base para testes diversos das tecnologias envolvidas,
para os próximos games.
– WebGL
– Design
– Publicação no Market;
– Achievements
– Azure
– Ad services

* Problemas Atuais: Não gerou UWP 10, apenas para UWP 8.1
(Detalhes da versão unity 5.2.1f1.)

Sugestões, são sempre bem vindas.