{"id":866,"date":"2010-12-01T08:36:09","date_gmt":"2010-12-01T11:36:09","guid":{"rendered":"https:\/\/devkico.itexto.com.br\/?p=866"},"modified":"2010-12-01T08:39:23","modified_gmt":"2010-12-01T11:39:23","slug":"brincando-com-canvashtml5","status":"publish","type":"post","link":"https:\/\/devkico.itexto.com.br\/?p=866","title":{"rendered":"Brincando com canvas\/HTML5"},"content":{"rendered":"

Tenho um brinquedo novo agora: trata-se do elemento canvas presente no HTML 5 e atualmente suportado por pr\u00e1ticamente todos os browsers modernos (h\u00e1 uma lista de compatibilidade aqui<\/a>). Bem: meu objetivo para 2011 \u00e9 come\u00e7ar a atuar profissionalmente com jogos. Sendo assim, comecei com OpenGL e SDL, que estou estudando fren\u00e9ticamente. Por\u00e9m, vi alguns demos usando canvas e pensei: “ei! Quero fazer tamb\u00e9m!”.<\/p>\n

Sendo assim, neste post vou expor tr\u00eas experimentos que fiz com este novo recurso do HTML 5. Em um post posterior, pretendo explicar o c\u00f3digo fonte de cada um deles.<\/p>\n

Experimento 1: Nanna Invaders<\/h3>\n

Essa Nanna… vive aprontando das suas! Neste experimento, tentei criar um jogo bem simples. A regra \u00e9 besta: voc\u00ea deve destruir os terr\u00edveis invasores retangulares que tentam destruir a Terra. Esquerda e direita para movimentar-se, direcional pra cima para atirar. N\u00e3o ligue para os gr\u00e1ficos (foi o meu primeir\u00edssimo experimento, e ainda est\u00e1 portanto “atar\u00edstico”).<\/p>\n

\"\"<\/a><\/p>\n

Experimento 2: Dil\u00favio de Papel<\/h3>\n

Ap\u00f3s criar interatividade bem b\u00e1sica com Nanna Invaders, resolvi fazer experimentos estritamente gr\u00e1ficos. A id\u00e9ia era ver o que eu poderia fazer usando, al\u00e9m das primitivas gr\u00e1ficas do canvas, as transforma\u00e7\u00f5es tamb\u00e9m. Dil\u00favio de Papel \u00e9 basicamente a aplica\u00e7\u00e3o da transforma\u00e7\u00e3o rota\u00e7\u00e3o em “nuvens” que havia desenhado anteriormente.<\/p>\n

\"\"<\/a>Para minha surpresa, o resultado foi incr\u00edvelmente agrad\u00e1vel. Diria at\u00e9 hipn\u00f3tico. :)<\/p>\n

Experimento 3: Fantasmas<\/h3>\n

Resolvi ent\u00e3o ir um pouco al\u00e9m. Que tal criar personagens mais simp\u00e1ticos que um ret\u00e2ngulo? Foi quando surgiram fantasmas em minha cabe\u00e7a. :)<\/p>\n

\"\"<\/a><\/p>\n

Conclus\u00f5es at\u00e9 agora<\/h3>\n

Ainda estou no in\u00edcio do aprendizado, mas o que pude observar \u00e9 que trabalhar com canvas \u00e9 muito mais f\u00e1cil do que imaginava e, pra minha surpresa, a compatibilidade atualmente est\u00e1 bem boa. Vi minhas anima\u00e7\u00f5es sendo executadas muito bem, com diferen\u00e7as percept\u00edveis mas m\u00ednimas no IE8, Firefox 3.5 e Chrome (no Chrome o bicho BRILHA).<\/p>\n

Outro ponto que me chamou a aten\u00e7\u00e3o foi a quantidade de c\u00f3digo que precisei digitar. Repare no c\u00f3digo fonte (\u00e9 o que h\u00e1 de realmente bonito nestes experimentos). Ele \u00e9 m\u00ednimo!<\/p>\n

J\u00e1 li alguns posts dizendo que o canvas ir\u00e1 matar o Flash. Minha opini\u00e3o \u00e9 que, ao menos no momento, isto \u00e9 papo furado<\/strong>. O “animador” precisa saber programar e nem sempre (na realidade, quase nunca), este possui boas habilidades de desenho. Arrastar e soltar ou desenhar usando o mouse com o canvas ainda \u00e9 sonho. S\u00f3 vejo o canvas chegar pr\u00f3ximo ao Flash se um dia surgir alguma IDE bacana (e esta, acredito, vai ser da pr\u00f3pria Adobe :) ).<\/p>\n

Por enquanto, \u00e9 isto. Nas pr\u00f3ximas semanas pretendo publicar mais alguns experimentos nos quais venho trabalhando (incluindo detalhes sobre o funcionamento). Estou MUITO animado com os resultados (ainda n\u00e3o publicados). E voc\u00ea? O que achou dos meus bichinhos?<\/p>\n","protected":false},"excerpt":{"rendered":"

Tenho um brinquedo novo agora: trata-se do elemento canvas presente no HTML 5 e atualmente suportado por pr\u00e1ticamente todos os browsers modernos (h\u00e1 uma lista de compatibilidade aqui). Bem: meu objetivo para 2011 \u00e9 come\u00e7ar a atuar profissionalmente com jogos. Sendo assim, comecei com OpenGL e SDL, que estou estudando fren\u00e9ticamente. Por\u00e9m, vi alguns demos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[61,53],"tags":[],"class_list":["post-866","post","type-post","status-publish","format-standard","hentry","category-javascript","category-web-design"],"yoast_head":"\nBrincando com canvas\/HTML5 - \/dev\/Kico<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devkico.itexto.com.br\/?p=866\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Brincando com canvas\/HTML5 - \/dev\/Kico\" \/>\n<meta property=\"og:description\" content=\"Tenho um brinquedo novo agora: trata-se do elemento canvas presente no HTML 5 e atualmente suportado por pr\u00e1ticamente todos os browsers modernos (h\u00e1 uma lista de compatibilidade aqui). Bem: meu objetivo para 2011 \u00e9 come\u00e7ar a atuar profissionalmente com jogos. Sendo assim, comecei com OpenGL e SDL, que estou estudando fren\u00e9ticamente. Por\u00e9m, vi alguns demos […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devkico.itexto.com.br\/?p=866\" \/>\n<meta property=\"og:site_name\" content=\"\/dev\/Kico\" \/>\n<meta property=\"article:published_time\" content=\"2010-12-01T11:36:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-12-01T11:39:23+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/12\/canvas_nanna_atack-300x252.jpg\" \/>\n<meta name=\"author\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@loboweissmann\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=866\",\"url\":\"https:\/\/devkico.itexto.com.br\/?p=866\",\"name\":\"Brincando com canvas\/HTML5 - \/dev\/Kico\",\"isPartOf\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=866#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=866#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/canvas_nanna_atack-300x252.jpg\",\"datePublished\":\"2010-12-01T11:36:09+00:00\",\"dateModified\":\"2010-12-01T11:39:23+00:00\",\"author\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\"},\"breadcrumb\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=866#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devkico.itexto.com.br\/?p=866\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=866#primaryimage\",\"url\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/canvas_nanna_atack.jpg\",\"contentUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/canvas_nanna_atack.jpg\",\"width\":\"607\",\"height\":\"510\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=866#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devkico.itexto.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Brincando com canvas\/HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\",\"url\":\"https:\/\/devkico.itexto.com.br\/\",\"name\":\"\/dev\/Kico\",\"description\":\"Desenvolvendo software\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devkico.itexto.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\",\"name\":\"Kico (Henrique Lobo Weissmann)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"caption\":\"Kico (Henrique Lobo Weissmann)\"},\"sameAs\":[\"https:\/\/x.com\/loboweissmann\"],\"url\":\"https:\/\/devkico.itexto.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Brincando com canvas\/HTML5 - \/dev\/Kico","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:\/\/devkico.itexto.com.br\/?p=866","og_locale":"pt_BR","og_type":"article","og_title":"Brincando com canvas\/HTML5 - \/dev\/Kico","og_description":"Tenho um brinquedo novo agora: trata-se do elemento canvas presente no HTML 5 e atualmente suportado por pr\u00e1ticamente todos os browsers modernos (h\u00e1 uma lista de compatibilidade aqui). Bem: meu objetivo para 2011 \u00e9 come\u00e7ar a atuar profissionalmente com jogos. Sendo assim, comecei com OpenGL e SDL, que estou estudando fren\u00e9ticamente. Por\u00e9m, vi alguns demos […]","og_url":"https:\/\/devkico.itexto.com.br\/?p=866","og_site_name":"\/dev\/Kico","article_published_time":"2010-12-01T11:36:09+00:00","article_modified_time":"2010-12-01T11:39:23+00:00","og_image":[{"url":"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/12\/canvas_nanna_atack-300x252.jpg"}],"author":"Kico (Henrique Lobo Weissmann)","twitter_card":"summary_large_image","twitter_creator":"@loboweissmann","twitter_misc":{"Escrito por":"Kico (Henrique Lobo Weissmann)","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devkico.itexto.com.br\/?p=866","url":"https:\/\/devkico.itexto.com.br\/?p=866","name":"Brincando com canvas\/HTML5 - \/dev\/Kico","isPartOf":{"@id":"https:\/\/devkico.itexto.com.br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devkico.itexto.com.br\/?p=866#primaryimage"},"image":{"@id":"https:\/\/devkico.itexto.com.br\/?p=866#primaryimage"},"thumbnailUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/canvas_nanna_atack-300x252.jpg","datePublished":"2010-12-01T11:36:09+00:00","dateModified":"2010-12-01T11:39:23+00:00","author":{"@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7"},"breadcrumb":{"@id":"https:\/\/devkico.itexto.com.br\/?p=866#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devkico.itexto.com.br\/?p=866"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/?p=866#primaryimage","url":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/canvas_nanna_atack.jpg","contentUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/canvas_nanna_atack.jpg","width":"607","height":"510"},{"@type":"BreadcrumbList","@id":"https:\/\/devkico.itexto.com.br\/?p=866#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devkico.itexto.com.br\/"},{"@type":"ListItem","position":2,"name":"Brincando com canvas\/HTML5"}]},{"@type":"WebSite","@id":"https:\/\/devkico.itexto.com.br\/#website","url":"https:\/\/devkico.itexto.com.br\/","name":"\/dev\/Kico","description":"Desenvolvendo software","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devkico.itexto.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7","name":"Kico (Henrique Lobo Weissmann)","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","caption":"Kico (Henrique Lobo Weissmann)"},"sameAs":["https:\/\/x.com\/loboweissmann"],"url":"https:\/\/devkico.itexto.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/866"}],"collection":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=866"}],"version-history":[{"count":5,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/866\/revisions"}],"predecessor-version":[{"id":874,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/866\/revisions\/874"}],"wp:attachment":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}