Skip to content

Category: english

JavaFX, comic balloon

A example of how flexible can be extending your own Custom Node. In this example I’m creating a comic ballon that can be simple created by:

Ballon {
   text: "I can has fx?"

That can also be incremented to work like this:


Here a simpler implementation of a balloon, without the dragging behavior but that can be used for creating comics.

import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.geometry.Ellipse;
import javafx.scene.geometry.Polygon;
import javafx.scene.geometry.ShapeSubtract;
import javafx.scene.paint.Color;
import javafx.scene.Font;
import javafx.scene.text.Text;
import javafx.scene.FontStyle;
import java.lang.Math;
public class Balloon extends CustomNode {  
    /* (cx,cy) center of the balloon */
    public attribute cx: Number = 100 on replace {
        distance = Math.sqrt(toX * toX + toY * toY);
    public attribute cy: Number = 100 on replace {
        distance = Math.sqrt(toX * toX + toY * toY);
    /* (toX, toY) point where balloon points at */
    public attribute toX: Number = cx on replace {
        distance = Math.sqrt(toX * toX + toY * toY);
    public attribute toY: Number = cy on replace {
        distance = Math.sqrt(toX * toX + toY * toY);
    /* what is writted in the balloon */
    public attribute text: String = "balloon";
    /* font for the text */
    public attribute font: Font = Font {
        size: 24
        style: FontStyle.PLAIN
    /* Distance between (cx,cy) and (toX, toY) */
    private attribute distance: Number;
    /* Text inside the balloon */
    private attribute label = Text {
        font: bind font
        content: bind text
    /* place the label correctly based on text */
    init {
        label.x = -label .getWidth() / 2;
        label.y = label.font.size / 2;
    /* ballon body */
    private attribute body = ShapeSubtract{
        fill: Color.WHITE
        stroke: Color.BLACK
        blocksMouse: true
        a:  bind [
            Ellipse {
                radiusX: bind label.getWidth() / 2 + 20
                radiusY: bind font.size * 2
            Polygon {
                points : [
                    10 * ( - toY / distance),
                    10 * (toX / distance),
                    10 * (toY / distance),
                    10 * ( - toX / distance),
    public function create(): Node {
        return Group {
            cursor: Cursor.HAND
            content: [ body, label]
            translateX: bind cx
            translateY: bind cy

My Free Tileset, version 1

Although everything I do is under the license Creative Commons Attribution Share-Alike, I’m starting to group my pixelarts works  and release them in single files under the GPL.

Here the first and small release:

In summary: you can use them freely for open source or proprietary, games or prototypes, professionals or beginners developers, for study or for lucrative purposes, whatever you want. You don’t need even ask me for that, just use it (but I appreciate a reference). You can even modify them as long you also maintain the same freedom for the derivative work. For complete details, read the GPL or ask your questions in the commentaries.

If you are looking for a free, big and great tileset, look the wonderfull work of The Mana Word project (both code and art under GPL).

Soon I’ll group others pixel art drawings of others games I made in a single tileset file.

If you have a similar work in a compatible license we can make release of them togheter and create a big free tileset.

Quake 3 Arena on CAVE

Make sure watch until the gun part.


Information from the video:

A renderer for Quake 3 Arena maps in immersive environments, based on the Aftershock rendering engine and the CaveQuake wrapper. Shown here in the UC Davis KeckCAVES facility . The video was shot with a tripod-mounted video camera from outside the CAVE.