Sunday 4 May 2014

Making some progress

Progress is being made, the BitmapFont class (see picture) is now pretty much complete and tested. This is a picture of it with a sine function applied to the yScale.

The slight slant on the images is nothing to do with the font library, incidentally, it's the way the letters were when I created the working font with bmGlyph.

As usual you can see the actual demo (it spins and zooms this) in the github account https://github.com/autismuk/Font-Manager though obviously this is still very much a work in progress.

Things left to do are:

  1. The Font Manager - this tracks font usage, allows texts on a screen to be easily managed, and provides animation support.
  2. The Animation Support - the code will support this at the moment (e.g. you could make the 'curve' on the letter pictures move, or zoom in and out, or spin round (you can spin the letters individually or the whole thing).
  3. Some Animation Providers - these are some classes that provide some standard easily configurable animations and shapes. These aren't hard to write, you can pretty much make the letters do anything you want.
  4. Some sort of demo showing it working. This isn't a real demo, it's just the current state of my build - which is why the run code is still in the library - I will try to arrange it so every commit does do something, but what it will do depends largely on what I am testing at the time.

But it's looking quite promising. If anyone's wondering, this will be a freebie as well (pretty much you can do what you want with it, don't pretend someone else wrote it :) )

The guts of this demo, e.g. the bit to run it looks something like this (cut n pasted straight from the code)

local modClass = Base:new()
function modClass:modify(m,cPos,elapsed,length) 
local a = math.floor(cPos * 180*2) % 180
m.yScale = (math.sin(math.rad(a))+0.3)*3
end

display.newLine(0,240,320,240):setStrokeColor( 0,1,0 )
display.newLine(160,0,160,480):setStrokeColor( 0,1,0 )

local font = BitmapFont:new("demofont")
local str = BitmapString:new(font,44)

str:moveTo(160,240):setAnchor(0.5,0.5):setScale(1.3,1):setDirection(0):setSpacing(0):setFontSize(64)
str:setText("Another demo")
str:setModifier(modClass:new())

transition.to(str:getView(),{ time = 4000,rotation = 720, xScale = 0.5, yScale = 0.5})

This is actually more than is needed. the two lines are just drawing the lines, and the system will support fonts-by-name directly (e.g. you can write BitmapString:new("demofont",44) .  Some of the chained function calls are unnecessary (e.g. anchor is 0.5,0.5, direction is 0, spacing is 0 and you could put the 64 in the BitmapString:new() call) but just there so I can tinker with them.

The modifier (the first five lines) is implemented as a class but in can be implemented as a function as well (shorter but less flexible) and there will be a bunch of standard ones so people can have special effects without writing modifier classes/functions at all. The modifier kind of says "well, it's this character, this amount of time has elapsed, how do you want to muck about with this one ?" - in this case it's applying a sine curve to the yScale. If you applied it to yOffset the characters would move up and down but would all be the same height. In the final version (doesn't work yet) if you added elapsed into that formula the curve will move about. The standard ones will be much easier than this, you won't have to faff around with trigonometry to get some effect or other.

So you'd only need about half the code in the final version.

No comments:

Post a Comment