alloc Library Method
Short Description: Allocate Space on Texture Atlas
Signature: t.alloc (w,h) or ({params})
Group: Texture
Class: transition Class
Allocates space on the texture atlas canvas for the transition.
Transitions can either show a color or a mapped image, the latter is called a texture.
The texture can either be shared with another transition or an individual new
texture image for the transition can be produced. In the latter case space
on the texture atlas needs to be allocated using this alloc method.
alloc is automatically implicitly called by paint, if it was not called explicitely before.
It needs to be called explicitely to provide special non-default paramters or in case painting
of the images is programmed manually without using paint.
Transitions which have a color and no texture need to
use color (or bgColor
and alpha(0)) to assign a color and to set the
background opacity to 0. Transitions that want to share the texture of another transition can use material.
Simple Examples without Parameters
The following two examples has the same effect and show the most common use of alloc.
In the first example alloc is implicitely called by paint, in the second example it is called explicitely.
Examples
taccgl.a("eximg").to({ox:200}).paint().start(); | RUN |
taccgl.a("eximg").to({ox:200}).alloc().paint().start(); | RUN |
Alloc with w and h Parameters
Sample HTML
element with id="s10"
Using the w and h paramters width and height of the space to allocate can be given.
Default is width and height of the HTML element associated with the transition.
Allocating a bigger texture in general shows the texture in better quality, which becomes
especially apparent if the shown element is enlarged.
On the other hand it needs more texture space.
Examples
taccgl.a("s10").posZ(0,4800).alloc(100,100).dur(10).paint().start(); | RUN |
taccgl.a("s10").posZ(0,4800).alloc(1000,1000).dur(10).paint().start(); | RUN |
var t=taccgl.a("s10"); t.posZ(0,4800).alloc(t.w*0.5,t.h*0.5).dur(10).paint().start(); | RUN |
var t=taccgl.a("s10"); t.posZ(0,4950).alloc(t.w*5,t.h*5).dur(10).paint().start(); | RUN |
The second two example calculate the size of the texture space based on the size of the underlying
HTML element by using t.w and t.h.
Alloc without Paint
The following example uses alloc but no paint. Instead it uses the browsers 2D Canvas drawing
functions to draw a texture on the allocated texture space.
Examples
var t=taccgl.a("eximg2").from({oy:-200}).alloc(); t.texTransform(); var c=taccgl.texc; c.strokeStyle="#000000"; c.lineWidth=10; c.beginPath(); c.moveTo(t.x,t.y); c.lineTo(t.x+t.w, t.y+t.h); c.stroke(); t.start(); | RUN |
Alloc Caching
If alloc is called multiple times for transitions that are associated with the same HTML element,
it caches the allocation and returns the same texture space for both transitions.
This is an important optimization for texture space. If it is not desired the parameter cache:false
must be supplied.
Additional Parameters params
Additional parameters can be supplied as fields of a parameter object passed a single parameter to alloc.
w and h have the same function as if they supplied directly as parameters.
cache controls caching as discussed previously.
Sample HTML
element with id="s11"
scale, scalew, scaleh scale the texture space allocated by a given factor. A single factor can be given
or separate factors for width and height.
Examples
taccgl.a("s11").posZ(0,4800).alloc({scale:0.5}).dur(10).paint().start(); | RUN |
taccgl.a("s11").posZ(0,4800).alloc({scale:5}).dur(10).paint().start(); | RUN |
taccgl.a("s11").posZ(0,4800).alloc({scalew:0.5,scaleh:5}).dur(10).paint().start(); | RUN |
padleft, padright, padtop,
and padbottom add some space at the left, right, top,
or bottom of the texture. This does not enlarge the allocated
texture itself, but leaves space on the texture atlas between
the allocated textue and other allocated textures.
In the following example paint works on the allocated textue and then
the clip method is used to extend the displayed
texture to the complete allocated space including the padding.
Examples
var a=taccgl.a("eximg3").to({ox:200}). alloc({padleft:10, padright:10, padtop:10, padbottom:10}).paint(); a.clip(a.x-10,a.y-10,a.w+20,a.h+20).bgColor("red").start(); | RUN |
WebGL™ is a trademark of the Khronos Group Inc.
| 
3D Animation
