williamandClaude Sonnet 5
9e076f8cf9
L'utilisateur a testé la Phase 7 (sprites pilotés via un menu déroulant + zone de texte dans la logique de flow) et l'a rejetée à raison : ce n'est pas comme ça qu'un moteur de jeu (Phaser, Unity) gère un personnage. Cette refonte remplace tout le flux d'AUTEURING par un vrai widget visuel — le moteur d'exécution de la Phase 7 (runSpriteAnimation, activeSpriteAnimations, orientation, kind="sprite" de la Timeline) reste inchangé. Nouveau widget "personnage" (screens/widgets/registry.py) : - Rendu serveur dédié (special_render, screens/rendering/render_personnage.py) qui affiche la pose "idle" dès le HTML généré — jamais une image cassée à configurer après coup. - Toutes ses données (source Forge ou sprites propres au créateur, quel personnage/quelles animations) vivent dans une seule clé JSON _personnage_data (screens/rendering/personnage_data.py), sans aucune migration de schéma (même patron que c_clause_list). - Nouvelle échappatoire "custom_panel", symétrique à "special_render" mais pour le panneau de propriétés : ce widget affiche une galerie/un import de sprites sur-mesure plutôt que les contrôles génériques. Galerie visuelle de personnages Forge (VRAIES miniatures, pas un emoji) : - Panneau gauche "🎭 Personnages" : pose un personnage déjà configuré, animé immédiatement. - Panneau droit (propriétés) : change le personnage Forge de l'élément sélectionné, ou importe les animations d'un sprite personnalisé. - static/js/screen_edit/personnage-preview.js : lance l'aperçu animé de CHAQUE personnage du canevas dès le chargement de la page et après toute sauvegarde — le cœur de la demande ("je dois voir ça bouger"). Sélecteur d'animation à miniatures (nœud de flow "Jouer une animation" et clip de Timeline "sprite") : remplace le menu déroulant/la zone de texte par une grille de vraies miniatures, scopée aux SEULES animations du personnage réellement ciblé (ELEMENT_ANIMATIONS_MAP, résolu côté serveur à partir des propriétés de cet élément précis) — jamais un catalogue global. Le format stocké sur le nœud/le clip ({frames, fps, loop}) est inchangé, seule l'UI d'édition change. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
56 lines
2.6 KiB
JavaScript
56 lines
2.6 KiB
JavaScript
// ---------- Aperçu animé immédiat dans l'éditeur (Phase 8) ----------
|
|
// Le cœur de la demande : un personnage posé sur la scène doit s'animer
|
|
// tout de suite dans le canevas, sans ouvrir la Timeline ni la logique de
|
|
// flow. static/js/play/actions.js (runSpriteAnimation) n'est PAS chargé
|
|
// dans l'éditeur — mirror allégé de son moteur, scopé à l'idle de chaque
|
|
// personnage du canevas (un seul intervalle actif par élément, comme le
|
|
// moteur de jeu).
|
|
var _personnageIdleIntervals = {};
|
|
|
|
function _stopPersonnageIdlePreview(elementId) {
|
|
if (_personnageIdleIntervals[elementId]) {
|
|
clearInterval(_personnageIdleIntervals[elementId]);
|
|
delete _personnageIdleIntervals[elementId];
|
|
}
|
|
}
|
|
|
|
function _startPersonnageIdlePreview(targetEl, elementId, frames, fps) {
|
|
_stopPersonnageIdlePreview(elementId);
|
|
if (!frames || !frames.length) return;
|
|
targetEl.src = frames[0];
|
|
if (frames.length === 1) return;
|
|
var frameIndex = 0;
|
|
_personnageIdleIntervals[elementId] = setInterval(function () {
|
|
// Navigation pjax (voir pjax.js) : le canevas précédent est remplacé
|
|
// sans que ce script ne soit prévenu — s'auto-arrête dès que son
|
|
// élément a quitté le DOM plutôt que de tourner indéfiniment dans le
|
|
// vide.
|
|
if (!document.body.contains(targetEl)) { clearInterval(_personnageIdleIntervals[elementId]); return; }
|
|
frameIndex = (frameIndex + 1) % frames.length;
|
|
targetEl.src = frames[frameIndex];
|
|
}, 1000 / (fps || 8));
|
|
}
|
|
|
|
// Appelée après tout changement de personnage/animations (voir
|
|
// personnage-panel.js) pour relancer l'aperçu sans recharger la page.
|
|
function restartPersonnageIdlePreview(elementId, animations) {
|
|
var targetEl = document.querySelector('#canvas [data-element-id="' + elementId + '"][data-personnage="1"]');
|
|
if (!targetEl) return;
|
|
var frames = (animations && (animations.idle || Object.values(animations)[0])) || [];
|
|
_startPersonnageIdlePreview(targetEl, elementId, frames, 8);
|
|
}
|
|
|
|
function startAllPersonnagePreviews() {
|
|
document.querySelectorAll('#canvas [data-personnage="1"]').forEach(function (targetEl) {
|
|
var elementId = parseInt(targetEl.dataset.elementId, 10);
|
|
var animations = ELEMENT_ANIMATIONS_MAP[elementId];
|
|
var frames = (animations && (animations.idle || Object.values(animations)[0])) || null;
|
|
// Pas d'entrée dans ELEMENT_ANIMATIONS_MAP (personnage vidé/sprite
|
|
// personnalisé sans frame) : garde l'image déjà posée par le rendu
|
|
// serveur (ou rien), pas d'intervalle à démarrer.
|
|
if (frames && frames.length > 1) _startPersonnageIdlePreview(targetEl, elementId, frames, 8);
|
|
});
|
|
}
|
|
|
|
startAllPersonnagePreviews();
|