Canvas 2D Rendering Context: GWT & Android Gaming Tutorial 3

Canvas 2D Rendering Context: GWT & Android Gaming Tutorial 3

Hello, everyone! This is Rodrigo Silveira with This is tutorial number 3 of the 2D game
development series using Google Web Toolkit. So this first
tutorial where we actually get into the program
is part of it moment to look at the most basic
constant llegas I’m first the most basic pretty basic
concept game development whizzes rendering part of it and in a
seminal 5 for in toolkits we’re gonna use the html5 campus to do that so just getting started right away heavy
acquitted project setup him pretty basic has mom was wrong one entry points class which is this
class for him and right now all it does is create a label in the it displays a label onto the roof panel
which looks like this so with that setup in place so let’s get
started for shimon have to do is use a campus let’s create a campus I mean this is the
html5 tag I get history has JavaScript element we can use also
the has to render a PA and the way we use it in quits is that we called is factually message
in a campus objector class called creates if supported and the reason for that the
reason we don’t use to something like campus because new campus is because the browser loads this menace
supported so spiritedness imports so the liquid dozen muses in this factory control look at the code and see what
it’s trying to do and it says it detects if it’s available if it supported by the
browser and if it’s nice returns no otherwise returns a new campus so technically what we should do I have to recruit a
campus is check if the campus equals equals no
gonna soon you know this is a modern browser that’s running this for
all practical purposes which is make to censor campuses so what
we can do then is say route panel to get to and and and the campus to the Peachtree so is to reload the project’s XO plank but if we analyzed a pager click to campus we can actually see
vetting facts there is campus rate you and default with in height is 300 as you can see the in your 300 by 1:15 assisted in defining and the background
color is actually it’s actually way China make sure its
weight in a chance pants contest against him default
background color of the campuses transparent so that’s why we don’t see
anything refresh the page so and thats that’s alright I guess you
guys scan understand the concept what I like to do in a situation like
this is a set up some stone and this to the
campus so it’s not invisible I like to do is is to import something
like 3px dashed some sort of grain so we can see the campus and we know
it’s there so that’s what to do I guess what I do
in this case urges to buy defaults and this really doesn’t matter because
would be drawn on the campus before a noun coming to campus just have
relied trade so we can see hopefully can see on
the video also the analytical at a time plan around this you get the idea of
which is your campus onto the screen get that rectangular element I guess in this is where we’re
gonna do all over rendering it now the API that’s
exposed through the canvas is through a context so the full control on the campus we
need to get a hold of a context which allows it laws to star making calls to the context which
Android and the way we do that is recalled is staying on the campus called Jantz 2d context enough forces to name
is 2d and you can see this from return
something I’ve typed context 2d takes a string which is actually
optional but he returns I guess it doesn’t said detective with
the type this context 2d so we can do something like context 2d
and a lot of people just name it CTX short for context is is object right here which is part of
the campus John Kline packet-switched which and this is where
we how we can actually drive to the campus
so the first episode reiner critic Amazon and then dried on the
screen and name drevitz context where we can
draw free basic the one thing my wanna do also before we
put the cameras on the screen is to set width and height and there’s
actually images judges rubric 800 and I just use hide 400 and this will make the campus missus
expect industry guess we need to see TX from refresh the page and look at it campuses emissions I say injured by four hundred puts inside the
Frederick context aware that it works is dead it reached the campers as an array
two-dimensional sexy one-dimensional array but it’s easier to seek revenge
terms as two dimensions where each each 60 we had a hundred Texas going across
and 400 vertically he speaks of is an element in the array and then down
there represents a pixel which is the color perfect XO second the you know anything that’s made up of
dreaded green and blue channel and its center as value from 0
to 255 so 256 possible colors so in service pixel basically have three colors red green blue that we
played together Amica the color of the specs on and
that’s what the rendering context some represents the campus so we can
think in terms of X&Y Lake pics 1010 summer over here would be offset within the campus
context would be tense element and re going this
way and then Tesla ratings so the reason I mention that is telling you create a
campus by default the size of the campus is 300 with and 150 height even though was said
the within the hyde huge to something different the context
is to think enough to campus as being three hundred by 150 so in order to fix that we need to set
this other property on the campus Adele which aims not the width of the element but the
with love rendering context and animate the
property I can find it here is to Ford myspace height in with so this is what we need to set so we
need to set a coordinated with and this takes an integer said i’ve a string the reason this takes a string
is because my want to do percentage and whatever other type 60 representation so after which aims to
coordinate space with which refers to that a rainy that the context think so the campus est X height so now this points after this call the
context is thick enough to campus has been an array of a hundred
by 400 pixels and you can do the math to figure out
how much memory that’s taking up so the point is if we don’t make the
call to set within height like this which is
referring to the element the CSS parvin but we do said this size the array or Desai’s above the context is this review times the number the number of elements multiply by three
which is a number of pixels college channels which is actually for
because it also has alpha channel point is really important
these two things are separate this refers to the size of the Army on
the screen and these refers to this size campus the context so in other words if
this is really big and this is you know something smaller
DNA for rendering every pixel in the campers them were iterating through a lot of
pixels and for displaying a smaller element there may be a waste similarly if we set this 200-400 and this is a lot
bigger them what the browser would do is is
going to have to stretch in the news speak so will be larger than the actual screen pixel so
you may get distortion real important concept said enough to
campus now was to have a Keva set up in its on
the screen is the right size we can take the contacts and start
making calls to it in trying to do in those sorts of things
there’s a lot of mess it’s in the context object and if you go to papi page or the dock space we can see all dry methods that we have available it’s a lot of most services low level
stuff weekend right text sad 0 compiler do all
sorts of stuff edges dry basically primitive control lines and disrupt
excellence and everything against comes down to Rupp pixels weakens 1
pixel were Linea pixels any sort of urs attorney determining
whether it’s pics ok Go’s damn have helper methods like draw a line we on
the specified from this pic so to that pic so and
drive it in between so for example work into a rectangle if
he wants and I’ll have to do is go to the
contacts over him as saying still wrecked which would run rectangle
and you can see DAPI takes four doubles which is the X
in the way 11 want to start drawing themselves star
from point 1010 emina just something daddy’s maybe 250 pixels wide and 300 exercise so this will go to this array representation at the campus and
would take all the pixels from point n 10 two points 260 and 310 and is going to film black which is the default scholar since
we have changed for go back to the application over here soon as my
browser decides to go ulysses somewhere over you finance
correct that’s all black eventually time now there you go so from point 1010
it’s stressing and whatever the with a hyphen specified
so that’s one way to do it this is really low levels 21 a drawing image this really colorful
and stuff like that went on a big making the calls ourselves to draw every
shape and everyone XO instead we’re gonna be using these method in the campus context event and its the only woman to use in this series
which is called dry image and there’s different versions are
then but essentially this method will take and image and then we’ll take the next nyan within
Heights similar to how to draw a rectangle but
we also specify an image so it would rather and we’ll get into a
next tutorial book just as a set up what I’m going to do is
John I went sOooo the open game art where we can grab free
images for game development stuff like that so
I just did a search for ninja found this sprite sheet word is at less
I guess is the proper way has slid in injecting and that’s all I’m
gonna be drying for now using the did Ryan this message
on the campus context so that’s where next tutorial online again ahead of myself it closer question see
comments with this tutorial and I’ll try to answer it and questions
Besse K and we’ll see you next time


  • Wayne Fulcher says:

    Amazing how you were able to stretch about 3 minutes of information over a 15 minute video.

  • Easy Learn Tutorial says:

    Pfff… that's nothing. You should see me explaining to my wife what I did at work that day. Easily stretch 5 minutes worth of information into well over an hour!

Leave a Reply

Your email address will not be published. Required fields are marked *