Offscreen canvas - HTML5 Game DevelopmentYouTube↗  IA↗(long shot)
Education  6.3K views 32 likes 3 dislikes   23 Feb 2015
Udacity 651K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
>> Tiled allows an artist to do multiple layers per map tile, meaning that we
Con Tiled, el diseñador puede añadir[br]muchas capas por tile, por lo que
can potentially do 10 draws per on screen tile. Sadly, our bounding view
se pueden hacer 10 dibujos[br]por tile en pantalla.
rectangle won't help us fix this in performance terms, so we have to employ a
El rectángulo limitador de visión[br]no arregla esto en cuanto al desempeño,
new technique. Now, as you've played Grids, you'll notice that their environment
por lo que usaremos una nueva técnica.[br]Como has jugado a GRITS
is mostly static. Which means that we could, hypothetically, add export time
habrás visto que su entorno es estático. Por eso, al exportar desde[br]el editor de mapas
from the map editor. Actually composite our entire map into a single image. At
podríamos combinar el mapa[br]completo en una sola imagen.
run time, this means instead of doing 200 to 2000 draw calls, we could only do
En la ejecución, significa que en vez de[br]llamar a dibujos de 200 a 2000 veces,
one. So this is not necessarily ideal, having a single large image representing
podríamos hacerlo una sola.[br]No es lo más ideal,
the background of our map. Because of the fact that that's actually a pretty big
una sola imagen que represente el fondo[br]del mapa, ya que es muy grande
image and it would take time to download that off the internet. Now, we can't
y tomaría tiempo descargarla de Internet.
deny the fact that this would help on the client's side for rendering. So, it'd
No podemos negar que nos ayudaría en la[br]renderización en el lado del cliente.
be nice to find a way to mix both these techniques together so that we can
Estaría bien encontrar un modo de mezclar[br]estas técnicas para que podamos
improve rendering and reduce download time. Thankfully, Canvas provides a technique called Off Screen Canvas Rendering that allows a single canvas to be
mejorar la renderización y reducir[br]el tiempo de descarga. Por suerte, Canvas nos ofrece la[br]Renderización de Canvas Fuera de Pantalla, una técnica que permite usar un solo canvas
used an, an image element for future draws. So let's say we create an off-screen
como elemento de imagen para[br]dibujos futuros. Digamos que creamos uno,
canvas. And in this canvas, we draw lots of little happy figures. Or happy
y en este canvas dibujamos muchas[br]caritas felices o arbolitos felices.
trees. Later, when we'd like to actually draw this to our main canvas. We simply
Cuando quisiéramos dibujarlos[br]luego en el canvas principal,
draw each of the elements using the draw image API. Passing into it the canvas
lo haríamos usando la API de drawImage[br]con el canvas que creamos antes.
that we composited before. So, if it took 300 draw calls to composite this canvas, when we draw to our real image, it will only actually take one for each
Así, si hacían falta 300 llamadas[br]al dibujo para crear este canvas, cuando lo hacemos con la imagen real,[br]solo hará falta una por cada vez
time we render it. So, instead of doing 1200 draw calls, we only have to do 4. Which I think we can all agree is a good thing. Now, in order to support off
que la renderizamos. Así, en vez de llamar[br]1200 dibujos, solo tenemos que hacer 4. Estaremos todos de acuerdo[br]en que está bien.
screen canvas, we need to keep track of a separate canvas for each tile that
Para soportar el canvas de fuera de[br]pantalla, hay que tener un canvas aparte
we're creating in our map. We've separated this functionality out into a canvas
para cada tile que creamos en el mapa.[br]Hemos separado esta funcionalidad
tile class. Now, the canvas tile class itself has some boundaries that we should
en la clase CanvasTile. Esta clase tiene algunos límites[br]de los que deberíamos hablar.
talk. First, is its x and y value in world space? And its width and its height.
Primero, sus valores X e Y en el espacio[br]del mundo, y el ancho y alto.
Next, we actually have a handle to the canvas object itself. Or more
Luego tenemos un controlador para[br]el objecto del canvas en sí.
specifically, a handle to the canvas DOM object. As well as the handle to the
En concreto, un controlador para[br]el objeto DOM del canvas, y otro
context for the canvas. The create element for this process should be given a
para el contexto del canvas.[br]Al elemento create de este proceso
width and a height. Besides setting up some initial values, the create function
se le debe asignar el ancho y el alto.
should actually go through and create a brand new canvas element in the DOM and
Además de establecer unos valores[br]de inicio, la función create debería crear en el DOM un nuevo[br]elemento de canvas
set its width and height accordingly to the past in values. From there, we cache
y fijar el ancho y alto de acuerdo[br]con los anteriores valores.
that handle, and actually grab a handle to the 2D graphics context for the canvas we just created.
Copiamos el controlador en la caché,[br]y tomamos un controlador para el contexto Graphics2D para[br]el canvas que acabamos de crear.
Similar videos:

Outro - HTML5 Game Development
Udacity
4.4K views 10 likes 2 dislikes 23 Feb 2015100% match

ViewRect - HTML5 Game Development
Udacity
3.2K views 3 likes 0 dislikes 23 Feb 2015100% match

Tile Packet - HTML5 Game Development
Udacity
2.7K views 2 likes 0 dislikes 23 Feb 2015100% match

Your first canvas - HTML5 Game Development
Udacity
39K views 64 likes 6 dislikes 23 Feb 2015100% match

Loading images - HTML5 Game Development
Udacity
25.1K views 26 likes 2 dislikes 23 Feb 2015100% match

Parsing Texturepacker Output - HTML5 Game Development
Udacity
16.4K views 37 likes 0 dislikes 23 Feb 2015100% match

Loading Map Data - HTML5 Game Development
Udacity
6.2K views 5 likes 0 dislikes 23 Feb 2015100% match

Tileset Array - HTML5 Game Development
Udacity
3.4K views 1 likes 2 dislikes 23 Feb 2015100% match

Course Introduction - HTML5 Game Development
Udacity
95.5K views 413 likes 14 dislikes 23 Feb 2015100% match

Rendering Texturepacker Output - HTML5 Game Development
Udacity
8.3K views 14 likes 2 dislikes 23 Feb 2015100% match

Inspecting JSON - HTML5 Game Development
Udacity
3K views 8 likes 4 dislikes 23 Feb 2015100% match

Your first canvas - HTML5 Game Development
Udacity
42.8K views 42 likes 2 dislikes 23 Feb 2015100% match

Animation - HTML5 Game Development
Udacity
17.6K views 43 likes 3 dislikes 23 Feb 2015100% match

Drawing the Map - HTML5 Game Development
Udacity
8.7K views 13 likes 2 dislikes 23 Feb 2015100% match

Tileset Array - HTML5 Game Development
Udacity
3.1K views 3 likes 1 dislikes 23 Feb 2015100% match

Frame Trimming - HTML5 Game Development
Udacity
6.4K views 9 likes 0 dislikes 23 Feb 2015100% match

Browser Connections - HTML5 Game Development
Udacity
12.6K views 21 likes 1 dislikes 23 Feb 2015100% match

Drawing images - HTML5 Game Development
Udacity
25.2K views 35 likes 2 dislikes 23 Feb 2015100% match

JSON - HTML5 Game Development
Udacity
3.4K views 12 likes 1 dislikes 23 Feb 2015100% match

Introduction - HTML5 Game Development
Udacity
42.2K views 76 likes 4 dislikes 23 Feb 2015100% match

Parsing Trimmed Textures - HTML5 Game Development
Udacity
5.8K views 6 likes 0 dislikes 23 Feb 2015100% match

Specifying the Contact Listener - HTML5 Game Development
Udacity
660 views 2 likes 0 dislikes 23 Feb 2015100% match

Parsing Trimmed Texturess - HTML5 Game Development
Udacity
5.5K views 3 likes 0 dislikes 23 Feb 2015100% match

Tiled map data - HTML5 Game Development
Udacity
6.2K views 9 likes 3 dislikes 23 Feb 2015100% match

Drawing Tiles - HTML5 Game Development
Udacity
2.7K views 2 likes 0 dislikes 23 Feb 2015100% match

Atlases vs Spritesheets - HTML5 Game Development
Udacity
11.3K views 21 likes 2 dislikes 23 Feb 2015100% match

Tile Packet - HTML5 Game Development
Udacity
3K views 3 likes 0 dislikes 23 Feb 2015100% match

Loading Tileset Data - HTML5 Game Development
Udacity
3.4K views 5 likes 0 dislikes 23 Feb 2015100% match

Loading Tileset Data - HTML5 Game Development
Udacity
3.7K views 2 likes 0 dislikes 23 Feb 2015100% match

Drawing Images - HTML5 Game Development
Udacity
24.3K views 30 likes 0 dislikes 23 Feb 2015100% match


Settings Privacy About Contact Donate