Questo sito utilizza cookies, anche di terze parti, per mostrare pubblicità e servizi in linea con il tuo account. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Problema utilizzo di plugin per canvas
Forum - HTML / CSS - Problema utilizzo di plugin per canvas

Avatar
Thejuster (Admin)
Guru^2


Messaggi: 2061
Iscritto: 04/05/2008

Segnala al moderatore
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

  1. //Classi
  2. var $system = new System(); //System
  3. var $actor = new Actor(); //Actor Class
  4. var $vec2 = new Vector2(); //Vector Class
  5. var $win = new Scene_Window();
  6. var $keyboard = new Keyboard();
  7. var $mouse = new Mouse();
  8. var $camera = new Camera();
  9. var $gui = new GUI();
  10. var $music = new Audio();
  11. 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

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




dal momento che creo il loop

Codice sorgente - presumibilmente HTML / CSS

  1. //Funzione loop
  2. var fps = 30;
  3. function Loop()
  4. {
  5.     ctx.clearRect(0,0,800,600);
  6.     $scene.Render(ctx,viewport);
  7.    
  8.    
  9.    window.setTimeout(Loop, 1000 / fps);
  10.    
  11. }




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


Codice sorgente - presumibilmente HTML / CSS

  1. //-------------------------------
  2. // Mire Engine - Scene Title
  3. //------------------------------
  4. // (C) Copyright Making Italia
  5. //------------------------------
  6.  
  7. function SceneTitle()
  8. {
  9.     this.background = new Image();
  10.    
  11. }
  12.  
  13.  
  14. SceneTitle.prototype.Initialize = function()
  15. {
  16.    
  17.     this.background.src = "data\\System\\TitleScreen.png";
  18.     sfx.src = "data\\SE\\cursor.mp3";
  19. }
  20.  
  21.  
  22. //Update Cycle
  23. SceneTitle.prototype.Update = function()
  24. {
  25.    
  26. }
  27.  
  28.  
  29. //Draw Cycle
  30. SceneTitle.prototype.Draw = function(ctx,viewport)
  31. {
  32.    
  33.      if($system.GetOperatingSystem() == "Desktop")  { $gui.HideAll(); }
  34.                
  35.    
  36.     ctx.drawImage(this.background,0,0);
  37.    
  38.  
  39.       //------------  Problemi QUI
  40.  
  41.       var username = new CanvasText( canvas, {
  42.                         x: 20,
  43.                         y: 20,
  44.                         width: 300,
  45.                         placeholder: 'Enter your username...'
  46.                 } );
  47.        
  48.                 var password = new CanvasPassword( canvas, {
  49.                         x: 20,
  50.                         y: 55,
  51.                         width: 300,
  52.                         placeholder: 'Enter your password...'
  53.                 } );
  54.        
  55.                 var btt = new CanvasSubmit( canvas, {
  56.                         x: 20,
  57.                         y: 95,
  58.                         width: 300,
  59.                         placeholder: 'Submit',
  60.                         onSubmit: ( function() {
  61.                                 return connection.send(Packet.Login + username.value + ":" + password.value);
  62.                         } )
  63.                 } );
  64.  
  65.  
  66.  
  67.      
  68. }
  69.  
  70.  
  71. SceneTitle.prototype.InputDown = function(e)
  72. {
  73.      
  74.  
  75. }
  76.  
  77.  
  78. SceneTitle.prototype.InputUp = function(e)
  79. {
  80.    
  81. }




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?



PM Quote
Avatar
pierotofy (Admin)
Guru^2


Messaggi: 6223
Iscritto: 04/12/2003

Segnala al moderatore
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
PM Quote
Avatar
Thejuster (Admin)
Guru^2


Messaggi: 2061
Iscritto: 04/05/2008

Segnala al moderatore
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

  1. Initialize();
  2.    
  3.  function Initialize()
  4. {
  5.      $system.GetOperatingSystem();
  6.    
  7.     ctx.font="30px Arial";
  8.    
  9.    
  10.     $camera.Initialize(0,0,800,600);
  11.     $camera.Layer1 = layer1;
  12.     $camera.Layer2 = layer2;
  13.    
  14.     $actor.LoadImage("data\\Charaset\\chara.png");
  15.     $actor.position = new Vector2();
  16.     $actor.position.Vector2(640/2,480/2);
  17.    
  18.  
  19.     $gui.Initialize();
  20.    
  21.      
  22.    
  23.     //Configurazione Scene
  24.     $scene.Initialize(ctx,viewport);
  25.     $scene.ChangeScene("SceneTitle");
  26.    
  27.     //Configurazione Window
  28.     $win.Cache("System01.png");
  29.    
  30.    
  31. }
  32.  
  33.  
  34. /Ciclo Rendering
  35. Loop();
  36.  
  37.  
  38.  
  39. //Funzione loop
  40. var fps = 60;
  41. function Loop()
  42. {
  43.  
  44.     $scene.Render(ctx,viewport);
  45.     ctx.clearRect(0,0,800,600);
  46.    
  47.  
  48.       if($scene.Scene != "SceneTitle" )
  49.         {
  50.             Update();
  51.             Render();
  52.            //window.setTimeout(Loop, 1000 / fps);
  53.             requestAnimationFrame(Loop);  //Metodo di piero
  54.            
  55.         }
  56.      //Qui se escludo il commento si bugga
  57.     //requestAnimationFrame(Loop);
  58. }
  59.  
  60.  
  61.  
  62. function Update()
  63. {
  64.   $actor.Update();
  65.   $mouse.Update();
  66.    
  67. }
  68.    
  69.  
  70.    
  71. //Rendering GLobale
  72. function Render()
  73. {
  74.    
  75.     ctx.clearRect(0, 0, 800, 600);
  76.     $scene.Render(ctx,viewport);        
  77.            
  78.  
  79. }




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.


PM Quote
Avatar
pierotofy (Admin)
Guru^2


Messaggi: 6223
Iscritto: 04/12/2003

Segnala al moderatore
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
PM Quote