Skew, tint, custom fonts

Solar2D General Questions/Discussion
#1

Hello!

My app really needs a couple of features that I can’t seem to figure out how to do properly in Corona.

First, skewing, identical to skewing in Flash*. As far as I understand, I can do skewing as a combination of rotating and scaling. However, it seems tedious to animate a skewing animation of an object that has scales/rotations/translations as well - for example, it seems troublesome to synchronize skewing with the other changing parameters.

I think it’s possible, and I will definitely try this if I don’t get an answer (I’ve already posted this question: http://developer.anscamobile.com/forum/2010/03/01/advanced-transformations ), but it seems like such a simple thing to do if given access to the transformation matrices of objects directly. So, my question is this: is there any way to access these transformation matrices? If not, any chance skewing, or access to transformation matrices, could be made available in Corona in the near future (week-two, three tops), in a fashion that will allow me to add the parameters I need to a transition.to call?

Second, I need tints - also identical to Flash’s. Actually, I also need something like a glow (or outline) filter, so perhaps I’d like a means to do pixel manipulation in Corona. However, if I could get at least tints, that’d already be great.

Another thing I was interested in is custom fonts. Is there any way to use custom fonts in Corona?
*http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/geom/Matrix.html - link to the exact skew I need =) [import]uid: 8145 topic_id: 2061 reply_id: 302061[/import]

#2

Custom fonts are implemented: http://developer.anscamobile.com/content/display-objects#Using_a_custom_font [import]uid: 54 topic_id: 2061 reply_id: 6925[/import]

#3

I managed to get skewing working by nesting 4 display groups and adding the sprite to the innermost one.

What I did was to create a display object wrapper that generates the appropriate amount of nesting I needed (four in this case) and then add the display object to the inner most one.

I used the formula as defined here: http://www.eecs.berkeley.edu/~ug/slide/pipeline/assignments/as5/transforms3d.shtml#shear_rot_scale_rot_scale

Using that formula, the code looks like so (nest[1] is the outermost group and nest[4] is the innermost group):

[code]
shearX = function(self, x)
– an array containing references to nested display groups
– you need to define this somewhere
local nest = self.nest

– positive only, invert rotations for negative x
local shx = math.abs(x)

local t1 = 1 + shx
local t2 = 1 + shx + shx * shx
local t3 = 1 / t1

local a = math.atan( t3 )
local s = math.sqrt( t1 * t2 )
local b = math.atan( math.sqrt( t2 / t1 ) )
local sx = math.sqrt( t3 )
local sy = math.sqrt( 1 / t2 )

if x < 0 then
nest[1].rotation = -a
nest[3].rotation = b
else
nest[1].rotation = a
nest[3].rotation = -b
end

nest[2].xScale = 1
nest[2].yScale = s

nest[4].xScale = sx
nest[4].yScale = sy
end
[/code] [import]uid: 86395 topic_id: 2061 reply_id: 58137[/import]

#4

I’m hoping that it’s possible to get this feature in the nearest future. I would appreciate some comments from the devs on this: if it’s a reasonable wait, I don’t think we want to numb-down a lot of our existing animations. [import]uid: 8145 topic_id: 2061 reply_id: 6050[/import]

#5

how do you make the nest? i tried using a displaygroup like this :
shadowNest[1]=display.newGroup() shadowNest[1]:insert(rect)

shadowNest[2]=display.newGroup()
shadowNest[2]:insert(instance.shadowNest[1])

instance.shadowNest[3]=display.newGroup()
instance.shadowNest[3]:insert(instance.shadowNest[2])

instance.shadowNest[4]=display.newGroup()
instance.shadowNest[4]:insert(instance.shadowNest[3])

but your code doesn’t work :frowning: [import]uid: 76697 topic_id: 2061 reply_id: 65618[/import]

#6

Hello yanuar, sorry for the late reply.

Here’s my code for generating nested groups:

-- depth of 0 returns a single group without any nesting  
-- depth of 1 returns a group with 1 nested level  
-- etc  
function newNestedGroup(depth)  
 local group = display.newGroup()  
 local currGroup = group  
 local nest = {}  
  
 for i=1, depth do  
 local nestedGroup = display.newGroup()  
 currGroup:insert(nestedGroup)  
 currGroup = nestedGroup  
 nest[#nest + 1] = currGroup  
 end  
  
 -- this is for easy access to all the inner nest  
 group.nest = nest  
  
 -- this is for easy access to the innermost group  
 group.innermost = currGroup  
  
 -- you can add or reference the shearX function here  
 -- the function expects at least a depth of 4  
 group.shearX = shearXFunction  
  
 return group  
end

And here’s how to use it:

-- first create the nested group  
local ngroup = newNestedGroup(5)  
  
-- insert your image to the innermost group  
ngroup.innermost:insert(mysprite)  
  
-- call the shearX function  
ngroup:shearX(1)

In my app, I only needed to shear along a single axis. I’m guessing if you wanted to shear along multiple axes, you’ll need to increase the depth appropriately, and modify the functions to refer to the appropriate nest indexes.

Hope that helps :slight_smile: [import]uid: 86395 topic_id: 2061 reply_id: 66209[/import]

#7

see related post for a working version of shearing/wobbling using spritesheets

http://developer.anscamobile.com/forum/2010/09/17/how-might-i-deform-raster-images-wobble [import]uid: 74338 topic_id: 2061 reply_id: 100737[/import]