HTML / CSS - Problema utilizzo di plugin per canvas

Forum - HTML / CSS - Problema utilizzo di plugin per canvas

Thejuster (Admin)
Guru^2

Messaggi: 2305
Iscritto: 04/05/2008

Postato alle 14:24
Lunedì, 22/10/2018

Salve ragazzi, durante la creazione del mio client
ho la necessità di utilizzare dei TextBox su canvas.

Ho trovato dunque questo dalla rete.

http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canv ...

Il problema sta, che quando vado a fare il classico loop, il controllo si refresha in continuazione.
E per essere disegnato ha bisogno di un solo Clear. Cosa non ho capito perché accade.

Ho creato un sistema basato su processi di Rendering

esempio

Codice sorgente - presumibilmente Php

//Classi
var $system = new System(); //System
var $actor = new Actor(); //Actor Class
var $vec2 = new Vector2(); //Vector Class
var $win = new Scene_Window();
var $keyboard = new Keyboard();
var $mouse = new Mouse();
var $camera = new Camera();
var $gui = new GUI();
var $music = new Audio();
var $scene = new SceneManager();

Ed ho come dire fatto una sorta di Metodi identici per ogni tipo di classe
che richiama il draw.
tutto lo gestisce il SceneManager.

quindi faccio

Codice sorgente - presumibilmente Plain Text

$scene.Initialize(ctx,viewport);  //Ctx = Canvas , Viewport = Area virtuale
$scene.ChangeScene("SceneTitle");

dal momento che creo il loop

Codice sorgente - presumibilmente HTML / CSS

//Funzione loop
var fps = 30;
function Loop()
{
    ctx.clearRect(0,0,800,600);
    $scene.Render(ctx,viewport);
   
    
   window.setTimeout(Loop, 1000 / fps);
    
}

La Scene Title che sarebbe una schermata dove l'utente effettua il login è composta così

Codice sorgente - presumibilmente HTML / CSS

//-------------------------------
// Mire Engine - Scene Title
//------------------------------
// (C) Copyright Making Italia
//------------------------------
 
function SceneTitle()
{
    this.background = new Image();
    
}
 
 
SceneTitle.prototype.Initialize = function()
{
    
    this.background.src = "data\\System\\TitleScreen.png";
    sfx.src = "data\\SE\\cursor.mp3";
}
 
 
//Update Cycle
SceneTitle.prototype.Update = function()
{
    
}
 
 
//Draw Cycle
SceneTitle.prototype.Draw = function(ctx,viewport)
{
   
     if($system.GetOperatingSystem() == "Desktop")  { $gui.HideAll(); }
               
    
    ctx.drawImage(this.background,0,0);
    
 
      //------------  Problemi QUI
 
      var username = new CanvasText( canvas, {
                        x: 20,
                        y: 20,
                        width: 300,
                        placeholder: 'Enter your username...'
                } );
        
                var password = new CanvasPassword( canvas, {
                        x: 20,
                        y: 55,
                        width: 300,
                        placeholder: 'Enter your password...'
                } );
        
                var btt = new CanvasSubmit( canvas, {
                        x: 20,
                        y: 95,
                        width: 300,
                        placeholder: 'Submit',
                        onSubmit: ( function() {
                                return connection.send(Packet.Login + username.value + ":" + password.value);
                        } )
                } );
  
 
  
     
}
 
 
SceneTitle.prototype.InputDown = function(e)
{
      
  
}
 
 
SceneTitle.prototype.InputUp = function(e)
{
    
}

In pratica il funzionamento è questo.

All'avvio
$scene.ChangeScene("SceneTitle");

Il SceneManager che sarebbe $scene cambia in SceneTitle.
Di conseguenza il Render loop sarà passato alla classe SceneTitle al proprio metodo Draw.
E fin qui non ci sono problemi.
Ma il problema è che quando va il Draw, l plugin usato per disegnare L'inputBox
continua a refreshare in particolar modo,
E come se mostrasse al primo render, il testo correttamente, al successivo render tutto vuoto.
per poi ripetere all'infinito

testo visibile, testo vuoto, testo visibile, testo vuoto.

Non riesco a capire il motivo di questo problema.
Fatto sta, e che quando tolgo dal file principale

alla funzione loop commento

//window.setTimeout(Loop, 1000 / fps);

non effettua più il refresh e stranamente funziona regolare.
come mai?

https://mire.forumfree.it/ - Mire Engine
C# UI Designer

pierotofy (Admin)
Guru^2

Messaggi: 6230
Iscritto: 04/12/2003

Postato alle 12:37
Martedì, 23/10/2018

Forse il problema e' dentro Render (per il quale non c'e' il codice nel post).

p.s. usa https://developer.mozilla.org/en-US/docs/Web/API/window/req ... invece di setTimeout.

Il mio blog: https://piero.dev

Thejuster (Admin)
Guru^2

Messaggi: 2305
Iscritto: 04/05/2008

Postato alle 15:34
Martedì, 23/10/2018

Grazie pietro si in effetti è molto più veloce.
Ma sarà compatibile con Cordova?

Perché successivamente il progetto dovrà essere compilato sia per Android che per iOS etc.

riguardo alla parte principale del codice è questa

Ti posto solo le porzioni interessate.

Codice sorgente - presumibilmente HTML / CSS

Initialize();
    
 function Initialize()
{
     $system.GetOperatingSystem();
    
    ctx.font="30px Arial";
    
   
    $camera.Initialize(0,0,800,600);
    $camera.Layer1 = layer1;
    $camera.Layer2 = layer2;
    
    $actor.LoadImage("data\\Charaset\\chara.png");
    $actor.position = new Vector2();
    $actor.position.Vector2(640/2,480/2);
    
 
    $gui.Initialize();
    
      
    
    //Configurazione Scene
    $scene.Initialize(ctx,viewport);
    $scene.ChangeScene("SceneTitle");
    
    //Configurazione Window
    $win.Cache("System01.png");
    
   
}
 
 
/Ciclo Rendering
Loop();
 
 
 
//Funzione loop
var fps = 60;
function Loop()
{
  
    $scene.Render(ctx,viewport);
    ctx.clearRect(0,0,800,600);
    
 
      if($scene.Scene != "SceneTitle" )
        {
            Update();
            Render();
           //window.setTimeout(Loop, 1000 / fps);
            requestAnimationFrame(Loop);  //Metodo di piero
            
        }
     //Qui se escludo il commento si bugga
    //requestAnimationFrame(Loop);
}
 
 
 
function Update()
{
  $actor.Update();
  $mouse.Update(); 
    
}
    
 
    
//Rendering GLobale
function Render()
{
    
    ctx.clearRect(0, 0, 800, 600);
    $scene.Render(ctx,viewport);         
            
 
}

Il problema è il void loop

Se tolgo il requestAnimation esempio dalla condizione if e lo pongo in fondo
dove c'è il commento del timeout, si bugga mostrando il problema di cui ti dicevo.
qualsiasi cosa che vada a fare il repaint sul canvas mentre quel plug-in è in esecuzione
viene buggato.

non sò, ma sicuramente il problema non è da me.
Non credo che sbagli qualcosa, anche perché prima di quel plug-in funzionava tutto correttamente.

https://mire.forumfree.it/ - Mire Engine
C# UI Designer

pierotofy (Admin)
Guru^2

Messaggi: 6230
Iscritto: 04/12/2003

Postato alle 19:02
Martedì, 23/10/2018

E se sposti la chiamata "new CanvasText( canvas ..." da Draw a Initialize ? Forse non gli piace essere inizializzato piu' volte.

Il mio blog: https://piero.dev