Skip to content

Tag: animation

Un P’tit Café

Par Odelaf e Monsier D.

[youtube]eFnvxOmm6tc[/youtube]

Lyrique:

Pour bien commencer
Ma petite journée
Et me réveiller
Moi, j’ai pris un café
Un arabica
Noir et bien corsé
J’enfile ma parka
Ça y est je peux y aller

«Où est-ce que tu vas ?»
Me crie mon aimée
«Prenons un kawa
Je viens de me lever»
Étant en avance
Et un peu forcé
Je change de sens
Et reprends un café

A huit heures moins l’quart
Faut bien l’avouer
Les bureaux sont vides
On pourrait s’ennuyer
Mais je reste calme
Je sais m’adapter
Le temps qu’ils arrivent
J’ai l’temps pour un café

La journée s’emballe
Tout le monde peut bosser
Au moins jusqu’à l’heure
De la pause-café
Ma secrétaire entre :
«Fort comme vous l’aimez»
Ah mince, j’viens d’en prendre
Mais maintenant qu’il est fait…

Un repas d’affaire
Tout près du Sentier
Il fait un temps super
Mais je me sens stressé
Mes collègues se marrent :
«Détends-toi, René !
Prends un bon cigare
Et un p’tit café…»

Une fois fini
Mes collègues crevés
Appellent un taxi
Mais moi j’ai envie d’sauter
Je fais tout Paris
Puis je vois un troquet
J’commande un déca
Mais recaféiné

J’arrive au bureau
Ma secrétaire me fait :
«Vous êtes un peu en r’tard
Je me suis inquiétée»
Han ! – J’la jette par la f’nêtre
Elle l’avait bien cherché
T’façons faut qu’je rentre
Mais avant un café

Attendant l’métro
Je me fais agresser
Une p’tite vieille me dit :
«Vous avez l’heure s’il vous plaît ?»
Han – Je lui casse la tête
Et j’la pousse sur le quai
Je file à la maison
Et j’me sers un – devinez ?

«Papa, mon Papa,
En classe je suis premier»
Putain mais quoi ?
Tu vas arrêter de m’faire chier ?
Qu’il est con ce gosse !
En plus y s’met à chialer !
J’m’enferme dans la cuisine
Il reste un peu d’café

Ça fait quatorze jours
Que je suis enfermé
J’suis seul dans ma cuisine
Et je bois du café
Il faudrait bien qu’je dorme
Mais les flics vont m’choper
Alors je cloue les portes
Et j’reprends du café..

JavaFX, Side Scrolling Gaming

I started to make several small JavaFX game demos. I’m doing that to fell where JavaFX is good to make this sort of game and what patterns would be frequently needed to implement, where I will place a little framework for fast development of simple casual games. What I’m calling now just ‘GameFX’. My first experiment was to creating a side scrolling animation that’s is usefull to create the parallax effect in side scrolling games. For that I created the class Slidding. You create an Slidding with a set of nodes and they will slide from right to left and when a node reaches the left side it back to the right side.

Example:

Slidding {
    content: [
       Circle {
           centerX: 100, centerY: 100, radius: 40
           fill: Color.RED
       },
       Circle {
           centerX: 300, centerY: 100, radius: 40
           fill: Color.BLUE
       }
    ]
    clock: 0.05s
 }

That produces:

You create a Slidding with a list of Nodes at content, a clock (that will determine the speed of that animation) and a width. If you don’t provide a width, the slidding will do the best effort to determine one. You can use this approach to create more complex scenarios, using more Slidding groups.

This is a example of that:

import javafx.application.*;
import javafx.animation.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.scene.*;

import gamefx.Slidding;

var SCREENW = 500;
var SCREENH = 400;

/* the sky is a light blue rectangle */
var sky = Rectangle {
    width: SCREENW, height: SCREENH
    fill: LinearGradient {
        startX: 0.0 , startY: 0.0
        endX: 0.0, endY: 1.0
        proportional: true
        stops: [
            Stop { offset: 0.0 color: Color.LIGHTBLUE },
            Stop { offset: 0.7 color: Color.LIGHTYELLOW },
            Stop { offset: 1.0 color: Color.YELLOW }
        ]
    }
}

/* the ground is a olive rectangle */
var ground = Rectangle {
    translateY: 300
    width: 500, height: 100
    fill: LinearGradient {
        startX: 0.0 , startY: 0.0
        endX: 0.0, endY: 1.0
        proportional: true
        stops: [
            Stop { offset: 0.2 color: Color.OLIVE },
            Stop { offset: 1.0 color: Color.DARKOLIVEGREEN }
        ]
    }
}

/* a clod cloud is like an ellipse */
class Cloud extends Ellipse {
    override attribute radiusX = 50;
    override attribute radiusY = 25;
    override attribute fill = Color.WHITESMOKE;
    override attribute opacity = 0.5;
}

/* we create a slidding of clouds */
var clouds = Slidding {
    content: [
        Cloud{centerX: 100, centerY: 100},
        Cloud{centerX: 150, centerY:  20},
        Cloud{centerX: 220, centerY: 150},
        Cloud{centerX: 260, centerY: 200},
        Cloud{centerX: 310, centerY:  40},
        Cloud{centerX: 390, centerY: 150},
        Cloud{centerX: 450, centerY:  30},
        Cloud{centerX: 550, centerY: 100},
    ]
    clock: 0.2s
}

var SUNX = 100;
var SUNY = 300;
var rotation = 0;

/* the sun, with it's corona */
var sun = Group {
    rotate: bind rotation
    anchorX: SUNX, anchorY: SUNY
    content: [
        for (i in [0..11]) {
            Arc {
                centerX: SUNX, centerY: SUNY
                radiusX: 500, radiusY: 500
                startAngle: 2 * i * (360 / 24), length: 360 / 24
                type: ArcType.ROUND
                fill: Color.YELLOW
                opacity: 0.3
            }
        },
        Circle {
            centerX: SUNX, centerY: SUNY, radius: 60
            fill: Color.YELLOW
        },
    ]
}

/* animate the corona changing the it rotation angle */
var anim = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time : 0s
            values: rotation => 0.0 tween Interpolator.LINEAR
        },
        KeyFrame {
            time : 2s
            values: rotation => (360.0/12) tween Interpolator.LINEAR
        },
    ]
}
anim.start();

/* a tree is a simple polygon */
class Tree extends Polygon{
    public attribute x = 0;
    public attribute y = 0;
    override attribute points = [0,0, 10,30, -10,30];
    override attribute fill = Color.DARKOLIVEGREEN;
    init{
        translateX = x;
        translateY = y;
    }
}

/* a forest is a lot of trees */
var forest = Slidding{
    content: [
        Tree{x: 20, y: 320}, Tree{x: 80, y: 280}, Tree{x:120, y: 330},
        Tree{x:140, y: 280}, Tree{x:180, y: 310}, Tree{x:220, y: 320},
        Tree{x:260, y: 280}, Tree{x:280, y: 320}, Tree{x:300, y: 300},
        Tree{x:400, y: 320}, Tree{x:500, y: 280}, Tree{x:500, y: 320}
    ]
    clock: 0.1s
    width: SCREENW
}

Frame {
    title: "Side Scrolling"
    width: SCREENW
    height: SCREENH
    closeAction: function() {
        java.lang.System.exit( 0 );
    }
    visible: true

    stage: Stage {
        content: [sky, sun, clouds, ground, forest]
    }
}

Producing:

If you want to try these examples, place this Slidding implementation as Slidding.fx in a directory named gamefx, or grab here the NetBeans project.

package gamefx;

import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;

/*
 * The slidding group of nodes for side scrolling animations.
 *
 * @example
 * Slidding {
 *    width: 300
 *    content: [
 *       Circle { centerX: 100, centerY: 100, radius: 40, fill: Color.RED },
 *       Circle { centerX: 200, centerY: 100, radius: 40, fill: Color.BLUE },
 *    ]
 *    clock: 0.05s
 * }
 */
public class Slidding extends CustomNode {
    public attribute content: Node[];
    public attribute clock = 0.1s;
    public attribute width: Number;

    public attribute autostart = true;
    public attribute cycle = true;

    public attribute anim = Timeline {
        repeatCount: Timeline.INDEFINITE
        keyFrames : [
            KeyFrame {
                time : clock
                action: function() {
                    for(node in content){
                        node.translateX--;
                        if (node.getX() + node.translateX + node.getWidth() <= 0){
                            if(cycle){
                                node.translateX = width - node.getX();
                            } else {
                                delete node from content;
                            }
                        }
                    }
                } // action
            } // keyframe
        ]
    } // timeline 

    public function create(): Node {
        // if width is not setted, we try to figure out
        if(width == 0) {
            for(node in content) {
                if(node.getX() + node.getWidth() > width) {
                    width = node.getX() + node.getWidth();
                }
            }
        }

        // normaly the slidding will start automaticaly
        if(autostart){
            anim.start();
        }

        // just a Group of Nodes
        return Group {
            content: content
        };
    }
}

Is not the final implementation but it’s a idea. Soon I’ll show a demo game I did using theses codes.