• clear the screen.
• create your pictures.
• draw your pictures (a picture can only be drawn once).
• animate some of your pictures in an animation loop. This involves:
  • transforming drawn pictures.
  • erasing drawn pictures and creating/drawing new ones.
  • wiping all pictures and creating/drawing new ones.

Here's some code showing this in action:

// you dont need to use Staging with Pictures cleari() val im = PicShape.image(Costume.car) val line = PicShape.hline(100) // val background = ... draw(im, line) // draw(background) val ang = 1 var totalAngle: Int = _ var angLabel: Picture = _ onAnimationStart { // initialize vars here totalAngle = ang angLabel = trans(120, 0) -> PicShape.text(totalAngle, 15) draw(angLabel) } animate { im.rotate(ang) line.rotate(ang) angLabel.erase() totalAngle += ang angLabel = trans(120, 0) -> PicShape.text(totalAngle, 15) draw(angLabel) // let the background be }

Hope that points you in the right direction. Feel free to ask questions about any further problems you run into (and feel free to post your canon animation code to get further help. You can email me the image files at pant dot lalit at gmail dot com).

thanks ;)

we need some help…

We want in teaching purposes write small games with two cannons. The main problem now is how to do correct animation with loaded images ?
We want that children draw two cannons and background. Than we scan this pictures, extract background and canons and put in into Kojo scene.
So the problems:
1. every drawn image overlaps the image we want to draw at runtime (example below)
2. we have original canon image that is paralel to X axis, and we want to rotate it in absoulte manner like "rot(13) -> im", but not in reference manner like in example below.
3. how correctly we should draw the scene (possibly using picture stack)
- draw background
- above background should place two cannons
- than print wind/gravity/velocity/other data

import Staging._ import Staging.{animate, wipe} cleari val im = PicShape.image("/home/alex/circle.png") // small picture about 60x60 pixels val ang=1; animate{ wipe im.rotate(ang).realDraw() line(0,0,200,200) }