Aujourd’hui et demain

Une bibliothèque pour développeurs, puis un éditeur pour tous.

  1. 1.0.0

    Disponible : édition développeur

    Cette version demande de connaître la programmation. Elle fournit une bibliothèque Go/Ebitengine, des exemples exécutables, des outils en ligne de commande et des projets JSON pour configurer les effets, les calques, la musique et leur enchaînement.

    Voir la version 1.0.0
  2. 2.0.0

    Prévue : un éditeur graphique pour tous

    Vous pourrez créer une démo ou une intro sans savoir programmer. Tout le parcours sera graphique : importer les images et les fontes, choisir les effets, régler les paramètres et les trajectoires, superposer les calques, synchroniser la musique, organiser la chronologie, prévisualiser et exporter. Écrire du Go ou modifier du JSON à la main ne sera pas nécessaire.

Une scène, plusieurs calques

Les effets se combinent sur le même écran.

Sur cette scène DCK, un fond étoilé, un texte suivant une trajectoire, un logo animé, un reflet et une loupe partagent la même composition. Chaque effet garde ses paramètres et son horloge.

Composition DCK réunissant texte sur trajectoire, étoiles, reflet et loupe
Composition expérimentale réalisée avec les composants DCK.

Le principe

Des briques, pas un écran imposé.

DCK prend en charge les transports, les calculs et les surfaces de rendu. Une démo choisit ses images, ses textes, ses réglages et l’ordre des effets.

  1. 01

    Choisir les assets

    Fontes bitmap, logos, sprites, textures et musique restent propres à la création.

  2. 02

    Régler les effets

    Dimensions et ordre des caractères, vitesse, trajectoire, phase, couleurs, caméra et transparence.

  3. 03

    Superposer les calques

    Le même scroller, champ de sprites ou reflet peut être placé avant, derrière ou au-dessus d’un autre effet.

  4. 04

    Déclencher les scènes

    Séquences, changements de mode et musique avancent selon une cadence définie, sur ordinateur comme sur Android.

La boîte à effets

De la fonte au monde en 3D.

Ces familles partagent le même principe : partir d’un composant complet, puis ajuster son rendu ou l’associer à d’autres. Les images montrent de vrais écrans en Go/Ebitengine.

scrolling / fonts

Scrolltexts et fontes libres

Un texte peut défiler horizontalement, verticalement ou sur une trajectoire. Il peut onduler, grossir, se projeter en profondeur ou prendre une forme ADN. Plusieurs lignes et fontes peuvent avancer ensemble, puis se déplacer ou boucler à leur propre cadence. Chaque fonte apporte ses dimensions, son ordre de caractères et ses métriques ; des contrôles dans le texte peuvent changer la vitesse, la fonte ou la forme sans couper le mouvement.

fontspathzoomcontrols
Scrolltext en forme d’ADN dans Phenomena
Phenomena : un texte déformé sur une trajectoire ADN.

warps / reflections

Logos, images et reflets

Déformations par lignes, colonnes ou cellules, sinusoïdes avec déphasage, reflets dans l’eau et effet loupe s’appliquent aux logos comme à d’autres images. On peut placer plusieurs passes dans l’ordre voulu et donner à chaque calque sa propre animation.

StripWarpCellWarpwaterlens
Logo Bilizir et texte déformés sur un fond multicolore
Bilizir : logo, scrolling et déformations sur des calques distincts.

particles / sprites

Étoiles, particules et sprites

Un champ projeté peut dessiner des points, des sprites ou des traînées. Nombre d’objets, profondeur, réapparition, taille et couleur sont réglables ; les groupes ajoutent trajectoires, espacement et signaux musicaux. Les mêmes positions peuvent traverser plusieurs masques ou utiliser plusieurs images ; Big Sprite et Starballs emploient ainsi le même moteur avec des matériaux différents.

ProjectedFieldrespawnmasks
Sprites projetés dans l’écran Starballs
Union Starballs : sprites et masque.
Traînées d’étoiles derrière le logo Big Sprite
Cuddly Big Sprite : traînées d’étoiles.

3D / vectorballs

Cubes, boules et perspective

Cubes solides ou texturés, vectorballs en cube (arêtes, surface ou plein), pyramide ou drapeau, caméra et ombres peuvent être instanciés plusieurs fois. Les modes s’enchaînent en conservant la position de l’objet ; chaque instance choisit sa palette, sa taille et son rythme.

JellyCubevectorballscamera
Trois cubes DCK avec des palettes et des animations indépendantes
Trois instances d’un même effet, trois réglages indépendants.

raster / plasma / crt

Rasters, plasma et matières

Bandes colorées, fonds répétés, rotozoom, déformations ligne par ligne, plasma harmonique, masques et rendu CRT se combinent avec les textes, les logos et les formes 3D. Le nombre de passes, leurs couleurs et leur cadence définissent l’ambiance de chaque scène.

HarmonicImageCRTbands
Plasma coloré, cube et sprites superposés dans TeamG1
TeamG1 : plasma, cube, logos et texte sur un écran.

timing / audio / layers

Scènes, transitions et musique

Les calques gardent un ordre de dessin explicite. Une séquence choisit quand afficher ou faire évoluer un effet ; une bascule d’intro règle le fondu et le tick précis du départ musical. Le lecteur audio commun ouvre les musiques YM, les modules MOD/XM/S3M/IT ainsi que les enregistrements WAV, MP3 ou Ogg. La démo reste une composition Go, lisible et modifiable.

GroupSequencesound.Open
Damier en perspective, boules projetées et scrolltext dans 3D DOC
3D DOC : texte, sol projeté et boules avec ombres.

Recettes concrètes

Un réglage Go, un effet visible.

Chaque extrait vient d’un écran ou d’un exemple DCK exécutable. La vidéo muette dure de 7 à 14 secondes ; elle reste en pause jusqu’à ce que vous lanciez sa lecture.

Composition / projet JSON

Un projet sauvegardé, plusieurs traitements

Un CRT et un reflet traitent la seule couche de texte ; une loupe traite ensuite la scène complète, avec ses huit sprites et son fond animé. L’ordre des passes, leurs paramètres et leurs fenêtres sont sauvegardés dans le JSON. Ici, la loupe revient sept secondes sur neuf, sur ordinateur comme sur Pixel.

{
  "kind": "magnifier",
  "window": {
    "start": 1, "duration": 7,
    "fadeIn": 0.5, "fadeOut": 0.5
  },
  "period": 9,
  "magnifier": {
    "center": {"x": 320, "y": 222},
    "radius": 72, "zoom": 1.7
  }
}
Voir le projet JSON
00:12

Fond / répétition finie

Trois colonnes, deux rangées

Grodan superpose deux fonds qui bougent indépendamment. Les limites de copies préservent les bords vides et l’écart de deux pixels entre les rangées, sans construire une grande texture.

cfg := composite.BackgroundConfig{
    PeriodX: 640, PeriodY: 400,
    CopiesX: 3, CopiesY: 2,
}
back, _ := composite.NewBackground(cfg)
back.DrawAt(screen, image, x, y)
Voir le code complet
00:07

Fond / vitesse

Une bande infinie sans compteur local

Dans Cuddly Fullscreen, une bande de 16 pixels se répète sur toute la largeur. Sa vitesse est un paramètre du calque, indépendant du texte et du logo placés devant.

back, _ := composite.NewBackground(
    composite.BackgroundConfig{
        Source: image.Rect(0, 0, 16, strip.Bounds().Dy()),
        PeriodX: 16,
    })
layer := &composite.BackgroundLayer{
    Renderer: back, Image: strip,
    Pose: composite.BackgroundPose{Y: 52},
    VelocityX: -240,
}
layer.Update(frame)
layer.Draw(screen)
Voir le code complet
00:08

Sprites / formation harmonique

Douze sprites, deux horloges

Grodan fait suivre aux douze sprites des phases différentes, avec deux vitesses et une amplitude verticale qui rebondit. La même formation anime les logos lumineux de MegaTwist et les lettres à phases irrégulières de Beat Dis et du LED Scroller.

formation, _ := motion.NewHarmonicFormation(
    presets.GrodanSpriteFormationConfig())
group, _ := sprites.NewGroup(sprites.GroupConfig{
    Frames: frames, Count: len(frames), FrameStride: 1,
    Harmonic: formation,
    HarmonicClockStep: [2]float64{.02, .03},
    HarmonicEnvelope: &motion.BounceBankConfig{
        Start: []float64{0}, Velocity: []float64{.1},
        Min: -50, Max: 50,
    },
})
group.Update(frame)
group.Draw(screen)
Voir le code complet
00:08

Sprites / trajectoires individuelles

Quatorze lettres, quatorze chemins

Dans Replicants, chaque lettre suit son propre chemin : les va-et-vient rapides deviennent des vagues, puis des arcs traversent les panneaux dans les deux sens. DCK interpole 126 jeux de positions sur un cycle continu de 25 secondes. Le rythme et les coordonnées restent éditables, aussi dans un projet JSON.

// positions: 126 banks of 14 XY points, loaded from motion.json
formation, _ := motion.NewKeyframedFormation(
    motion.KeyframedFormationConfig{
        Count: len(letters), Loop: 25,
        Frames: positions,
    })
group, _ := sprites.NewGroup(sprites.GroupConfig{
    Frames: letters, Count: len(letters),
    FrameStride: 1, Formation: formation.At, Speed: 1,
})
Voir le code complet · Voir le projet JSON
00:12

Sprites / musique

Trois boules, trois voix YM

Dans Delta Force, chaque voix du morceau déclenche sa propre séquence de huit images. Une banque DCK gère les changements de niveau, les décroissances et les positions sans boucle d'animation dans l'écran. Les canaux, les images et les enveloppes restent réglables ; des signaux de module ou de PCM peuvent aussi déclencher les sprites sur un seuil montant.

config, _ := presets.UnionDeltaVoiceBalls(ballAtlas)
balls, _ := sprites.NewSignalFrameBank(config)
if registers, ok := music.YMRegisters(); ok {
    balls.StepYM(registers[8:11])
}
balls.Draw(scene)
Voir le code complet
00:08

Scrolling / bandes déformées

Le texte suit deux passes de bandes

Dans 3D DOC, des bandes de deux pixels déplacent le texte selon une table, puis une seconde passe ajoute un mouvement vertical. Le même moteur lit des colonnes fractionnaires dans les deux fontes de Cuddly 3D DOC ; la fonte, la table, l’épaisseur et les vitesses restent réglables.

cfg := composite.RowWarpConfig{
    Mode: composite.RowWarpDestinationX,
    Thickness: 2, Wave: presets.DOCRowWave(),
    WaveStep: 1, VerticalBase: 30,
    VerticalAmplitude: 30, VerticalDivisor: 20,
    VerticalStep: 1.2,
}
warp, _ := composite.NewRowWarp(cfg)
warp.Step()
warp.DrawInto(rows, textSurface)
Voir le code complet
00:08

Logo / onde par ligne

Le logo ondule vraiment

Dans Multi-Plane, chaque ligne du logo Carebears lit un point différent de la table sinus. Le décalage d’un échantillon par ligne crée l’ondulation ; l’amplitude, la vitesse, l’image source et le cadrage restent modifiables. La composition DCK ajoute les montagnes, le scroller 3D et le petit logo retourné.

wave, _ := motion.CompileWaveTable(
    presets.TCBLogoWaveSections()...)
rows := presets.TCBLogoRowProfile(wave, 303)
rows.RowStep = 1
rows.ScaleX, rows.ScaleY = 2, 2
rows.OutputX, rows.OutputY = 64, 60
logoRows, _ := composite.NewProfileImage(
    logo.SubImage(image.Rect(0, 16, 303, 48)).(*ebiten.Image), rows)
logoRows.Advance()
logoRows.Draw(screen)
Voir le code complet
00:10

Scrolling / profondeur

Quatre textes en pseudo-3D

Viva TCB partage une seule fonction de scrolling pour quatre textes indépendants. Chaque banque garde sa vitesse, sa hauteur et son inversion de profondeur ; les phases X, Y et Z, le nombre de caractères visibles et le clipping sont réglables sans changer la fonte.

cfg := presets.VivaPseudo3D(face, nil,
    [4]string{text1, text2, text3, text4}, 768, 540)
cfg.Banks[0].BaseY = 500
cfg.Pose.XAmplitude = 32
scroll, _ := scrolling.New(
    scrolling.Config{Pseudo3D: &cfg})
scroll.Update(frame)
scroll.Draw(screen)
Voir le code complet
00:10

Titre / raster animé

Un titre, deux modes de rendu

Le titre Viva combine deux rasters mobiles et une troisième répétition. DCK peut les composer sur une petite surface ou les dessiner directement dans une zone découpée, comme dans Multiscreen. Une horloge à attente déclenche ensuite sa trajectoire cosinusoïdale.

material, _ := composite.NewRasterTitle(
    presets.VivaRasterTitleCanvas(title, raster))
clock, _ := motion.NewWaveClock(
    presets.VivaTitleMotion(768, 970))
clock.Step()
material.Step()
material.DrawAt(screen, clock.At(0), 14)
Voir le code complet
00:10

Rotozoom / texture répétée

Un fond qui tourne et grossit

Viva TCB répète une seule tuile avec un quadrilatère graphique. Un programme DCK enchaîne l’entrée, l’orbite, le zoom et la rotation ; vitesse, amplitude et déphasage sont réglables séparément.

motion, _ := presets.NewVivaRotozoom(
    presets.DefaultVivaRotozoomConfig(768, 540))
cfg := composite.RotozoomBackgroundConfig{
    Image: tile, Program: motion,
}
background, _ := composite.NewRotozoomBackground(cfg)
background.Update(frame)
background.Draw(screen)
Voir le code complet
00:09

Fond / déformation par lignes

Une vague différente par ligne

MegaTwist échantillonne 276 lignes d’une petite texture répétée. Le programme de décalage horizontal et le rebond vertical avancent à des rythmes indépendants du scrolltext placé au-dessus.

background, _ := composite.NewScanlineBackground(
    composite.ScanlineBackgroundConfig{
        Tile: tile, Program: wave,
        Width: 416, Height: 276,
        SurfaceWidth: 672, SurfaceHeight: 64,
        BaseX: 80, WaveDivisor: 2, WaveStep: 5,
        BounceAmplitude: 30, BounceRate: .1,
        AlternateDiagonal: true,
    })
Voir le code complet
00:09

Rotozoom / pixels indexés

Le rotozoomer de Second Reality

Cet écran utilise le même principe de rotation et de zoom que Viva, avec un échantillonnage différent : texture indexée 256 × 256, calculs en point fixe et bouclage sur 16 bits. DCK conserve ces règles pour restituer les pixels d’origine.

roto, _ := indexed.NewRotozoom256(
    indexed.Rotozoom256Config{
        Width: 160, Height: 100,
    })
roto.Render(dst, picture, rotated,
    x, y, xa, ya)
Voir le code complet
00:09

Rasters / deux horloges

Des barres colorées qui se croisent

Bilizir anime 300 barres sur tout l’écran avec deux phases indépendantes. Le même composant dessine 36 bandes dans le titre de Coco et sa scène Multiscreen, avec une vitesse fractionnaire et un autre mode de rendu.

cfg := presets.BilizirCopperBars(
    image, 600, composite.CopperQuads,
    composite.MaskedClock)
bars, _ := composite.NewCopperBars(cfg)
bars.Update(frame)
bars.Draw(screen)
Voir le code complet
00:09

Raster / masque animé

Colorer un scrolling sans le redessiner

Big Sprite applique un raster mobile sur les lettres avec SourceAtop : leur transparence reste intacte. Le même effet sert Starwars avec SourceIn et plusieurs écrans Union, sans ajouter de grande surface de rendu.

raster, _ := composite.NewRasterOverlay(
    composite.RasterOverlayConfig{
        Image: colors, ScaleX: 85, ScaleY: 1,
        Alpha: 1, VelocityY: -2,
        WrapY: &composite.RasterWrap{
            Boundary: -177, Restart: 0,
            Inclusive: true,
        },
        Filter: ebiten.FilterLinear,
        Blend: ebiten.BlendSourceAtop,
    })
raster.Draw(textSurface)
raster.Step()
Voir le code complet
00:09

Scrolling / fonte

Un scrolling qui entre progressivement

TeamG1 introduit les glyphes au bord de sa scène de 640 pixels, puis décale le ruban de six pixels par image. La largeur de sortie, la fonte, l’ordre des caractères et la vitesse restent réglables ; avant le CRT, les images correspondent à celles de la version Go d’origine.

feed := scrolling.FeedConfig{
    Font: atlas, Text: message,
    Width: 768, Height: 72,
    InsertX: 640, Scale: 2, Speed: 6,
    UppercaseASCII: true,
}
scroll, _ := scrolling.New(
    scrolling.Config{Feed: &feed})
Voir le code complet
00:10

Vectorballs / forme

Un cube construit avec des boules

La fabrique DCK fournit les points du cube, ses segments et son remplissage. Un atlas prépare quinze palettes et sept tailles de boules ; le projecteur lit directement les points animés. Le même écran peut choisir une pyramide, un plan ou un drapeau et ajouter un reflet.

points, _ := sprites.Cube(
    sprites.CubeConfig{
        Size: 640, Segments: 6,
        Fill: sprites.Edges,
        Image: 120,
    })
Voir le code complet
00:10

Calques / post-traitement

Reflet, puis loupe temporaire

L’exemple Effects Lab assemble logo, scrolling sur trajectoire et fond étoilé. Un pipeline applique le reflet à la scène, puis la loupe pendant une fenêtre de temps, avec deux surfaces réutilisées.

waterCfg := composite.DefaultWaterReflectionConfig()
waterCfg.Wave.Amplitude = 4
reflection, _ := composite.NewWaterReflection(waterCfg)
lens, _ := composite.NewMagnifier()
// Apply reflection before lens in kit.NewPipeline.
Voir le code complet
00:14

Écrans complets

Voir les effets travailler ensemble.

Les vidéos suivantes montrent des démos construites avec DCK, avec plusieurs effets actifs en même temps. Elles sont hébergées sur ce site et se chargent seulement à la lecture.

Bilizir

Scrolling et logo déformés ensemble

Un logo reprend la déformation du scrolltext avec son propre déphasage ; cubes, rasters et reflets complètent la scène.

TeamG1

Plasma, cube et formation de logos

Le plasma fournit la matière colorée ; un cube texturé, des logos mobiles et un scrolltext restent synchronisés par la même scène.

Construire avec DCK

Une composition reste du Go simple.

Chaque composant reçoit une configuration, avance une fois par image logique, puis dessine dans l’ordre choisi. Le dépôt contient le guide complet, les préréglages issus des démos et des exemples exécutables.

Exemple : deux effets sur un écran

starSpec, err := presets.NonamenoProjectedStars(
    presets.DefaultNonamenoStarsConfig())
if err != nil { return err }
stars, err := sprites.NewProjectedField(starSpec)
if err != nil { return err }

cube, err := effects.NewJellyCube(
    effects.DefaultJellyCubeConfig())
if err != nil { return err }

scene := kit.Group{stars, cube}
if err := scene.Update(frame); err != nil { return err }
scene.Draw(screen)