none
Animación en ASP.NET Razor Page Web App C# RRS feed

  • Pregunta

  • Buenas tardes, colegas

    Sigo practicando y avanzando en el estudio de aplicación web ASP.NET Razor Pages. 

    Estuve tratando de googlear cómo hacer una animación en una Razor Page, pero sólo encontré una publicación con un ejemplo que produce errores en tiempo de compilación, la siguiente: 

    http://blazorhelpwebsite.com/Blog/tabid/61/EntryId/4325/Animation-and-Visual-Effects-in-Blazor-and-Razor-Components.aspx

    Les agradecería me orienten acerca de esto o me digan en qué sitios de Internet puedo investigar, teniendo en cuenta que para Escritorio en C# (y con la SFML) programo juegos similares a Super Mario Bros y Sonic The Hedgehog 3 And Knuckles.

    Básicamente, una animación es pegar diferentes o iguales imágenes dentro de un marco a través del tiempo, o sea, tengo las nociones conceptuales, lo que no se es como definir el loop en la Razor Page, por ejemplo, o sea cosas de sintaxis o específicas del web. 

    Desde ya, muchas gracias por su atención y su tiempo

    Saludos

    Pablo


    martes, 14 de abril de 2020 19:31

Respuestas

  • hola

    >>estás seguro que con Razor Pages no puedo hacer ni una animación mínima

    no, no se puede

    igual creo que equivocas la tecnologia, Razor es solo una parte de asp.net mvc, es solo el engine de render de las view

    No usas Razor usas asp.net mvc o asp.net core

    >>para ilustrar el link donde pongo "Download" en mi Razor Page?

    eso a a depender de como se integre el juego que creaste con html, hay algunos que permiten convertirlo a WebGL otros con ponerlo en un tag <object>

    nunca realice, pero conozco que se pueden crear juegos usando HTML5, por lo general usando mucho canvas

    Getting Started With HTML5 Game Development

    https://phaser.io/

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Tigre Pablito jueves, 16 de abril de 2020 19:42
    miércoles, 15 de abril de 2020 13:40
  • Pero entonces estás seguro que con Razor Pages no puedo hacer ni una animación mínima

    Maticemos esto: Con Razor no lo puedes hacer... pero lo que sí puedes hacer desde Razor es enviar al navegador una página que dentro contenga javascript, y ese javascript sí que puede hacer una animación. Pero en este caso, ese bucle "infinito" que queres hacer se encontraría hecho en javascript, no estaría programado en C# dentro de Razor.

    Esto es transparente para el usuario, que vería perfectamente la animación en la página que le presentas, y no "sabe" que esa animación se está haciendo en javascript en lado cliente en lugar de hacerse en Razor (que solo ejecuta código en lado servidor, no puede ejecutar nada en lado cliente).

    • Marcado como respuesta Tigre Pablito jueves, 16 de abril de 2020 19:42
    miércoles, 15 de abril de 2020 14:27

Todas las respuestas

  • hola

    Partamos de la base de Blazor no es Razor, pueden parecerse en nombre pero solo es eso, son tecnologicas completamente diferentes

    Si vas a usar Blazor debes aprender los conceptos de WebAssembly y como ejecutar codigo c# en el browser, esta es una tecnologia nueva para no usas javascript y poder correr .net en el cliente

    >>no se es como definir el loop en la Razor Page,

    que loop ? un foreach o for en Razor ejecuta del lado del servidor para generar html

    >>Estuve tratando de googlear cómo hacer una animación en una Razor Page,

    Creo que si vas a crear juegos deberias usar una mejor plataforma como ser Unity

    no soy creador de juegos, pero algo lei y entiendo que despues se podrian montar en una pagina web

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 14 de abril de 2020 20:59
  • Hola Leandro

    Gracias por responder

    No, para hacer video juegos uso la SFML que me parece lo mejor que hay, pero no es ese el punto, sino como hacer el loop (o ciclo o bucle "infinito") que haga el display de la animación en la Razor Page, o sea para hacer una animación, un juego o cualquier otra más pequeña (que es mi idea), se usa un loop "infinito", del cual se sale en ciertas circunstancias con la instrucción break;.

    No quiero usar Blazor, estoy usando Razor Pages que "me vendieron" (o yo "me compré") que es lo mejor que hay para hacer aplicaciones Web. 

    En todo caso, como se hace para poner un juego "online"? ... pero también querría poder hacer la animación más chica con código de la web app ...

    Muchas gracias!


    martes, 14 de abril de 2020 23:03
  • hola

    >>como hacer el loop (o ciclo o bucle "infinito") que haga el display de la animación en la Razor Page

    no existe el concepto de bucle infinito en Razor porque este ejecuta del lado del servidor y debe dar una respuesta con el html que genera

    Si te quedas en el servidor con un loop infinito estartias colgando el thread del servidor y po consiguiente tendras un error de asp.net

    >>es lo mejor que hay para hacer aplicaciones Web.

    es lo mejor, pero no para lo que quieres aplicarlo

    >>como se hace para poner un juego "online"?

    no con Razor (Razor es la tecnologia que usas asp.net mvc para generar html del lado del servidor), imagino usaras html (quizas el tag <object>) o quizas javascript, los juegos ejecutan en el browser

    Habria que ver ese juego como se embebe en el html

    Razor no aplica para crear juegos, sino aplicaciones de negocio, por eso decia que quizas necesitabas Blazor este si permite ejecutar codigo c# en el browser

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 15 de abril de 2020 0:04
  • Este es uno de los juegos, Leandro

    https://www.dropbox.com/s/ueyugzpyktbtrad/Super%20Mario%20Game%20Coded%20By%20Fan.rar?dl=0

    aunque me falta recortar un poco los archivos de música para que sea más liviano de peso ...

    (Funciona bien del World 1 al 4 y el 5 le falta el castillo de Kuppa y un poco, pero también)

    Pero entonces estás seguro que con Razor Pages no puedo hacer ni una animación mínima, como un Mario caminando, para ilustrar el link donde pongo "Download" en mi Razor Page?

    miércoles, 15 de abril de 2020 2:11
  • hola

    >>estás seguro que con Razor Pages no puedo hacer ni una animación mínima

    no, no se puede

    igual creo que equivocas la tecnologia, Razor es solo una parte de asp.net mvc, es solo el engine de render de las view

    No usas Razor usas asp.net mvc o asp.net core

    >>para ilustrar el link donde pongo "Download" en mi Razor Page?

    eso a a depender de como se integre el juego que creaste con html, hay algunos que permiten convertirlo a WebGL otros con ponerlo en un tag <object>

    nunca realice, pero conozco que se pueden crear juegos usando HTML5, por lo general usando mucho canvas

    Getting Started With HTML5 Game Development

    https://phaser.io/

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Tigre Pablito jueves, 16 de abril de 2020 19:42
    miércoles, 15 de abril de 2020 13:40
  • Pero entonces estás seguro que con Razor Pages no puedo hacer ni una animación mínima

    Maticemos esto: Con Razor no lo puedes hacer... pero lo que sí puedes hacer desde Razor es enviar al navegador una página que dentro contenga javascript, y ese javascript sí que puede hacer una animación. Pero en este caso, ese bucle "infinito" que queres hacer se encontraría hecho en javascript, no estaría programado en C# dentro de Razor.

    Esto es transparente para el usuario, que vería perfectamente la animación en la página que le presentas, y no "sabe" que esa animación se está haciendo en javascript en lado cliente en lugar de hacerse en Razor (que solo ejecuta código en lado servidor, no puede ejecutar nada en lado cliente).

    • Marcado como respuesta Tigre Pablito jueves, 16 de abril de 2020 19:42
    miércoles, 15 de abril de 2020 14:27
  • Hola Leandro y Alberto

    Seguí el link que me pasaste, Leandro, y estoy metiendome con la programación en JavaScript para hacer juegos o animaciones, estoy con un tutorial que estaba en la página que me pasaste, pero ahora tengo un nuevo problema: ese ejemplo de programación en JavaScript viene con libraries externas, que las pegué en la carpeta Pages de mi aplicación web Razor Pages, pero no logro que las reconozca, o sea anda todo bien hasta que uso uno de los recursos que traen esas libraries de JS externas, en el ejemplo accede directamente al nombre del archivo.

    Ustedes tendrán idea de cómo es la ruta absoluta o relativa en JavaScript a una library de JS que está en la carpeta Pages/javascripts ?

    Gracias

    EDITO: Olvidé decir que donde está el archivo _Layout donde en el <head> nombro las libraries es en Pages/Shared
    jueves, 16 de abril de 2020 19:49
  • hola

    >>viene con libraries externas, que las pegué en la carpeta Pages de mi aplicación web Razor Pages,

    si agregaste librerias javascript deberian estas los .js en la carpeta Scripts

    No se pone codigo cliente en las carpetas de View, Controllers porque esas son parte del asp.net mvc y solo aplican del lado del servidor

    Despues las referencias usando

      <script src="~/Scripts/xx.js"></script>

    en la view

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    jueves, 16 de abril de 2020 20:06
  • Hola Leandro

    Quisiste decir en la carpeta js (o es Scripts y yo entendí mal?)? Porque esa carpeta js ya existía en el proyecto. Los puse allí los archivos .js y creo que funcionaba pero no reconocía las teclas de las flechas, que ni lo reconocía haciéndolo directamente con e.KeyCode del evento onkeydown ... Y ahora puse las referencias en el mismo archivo .cshtml (la View) y ya ni la pantalla negra con el cuadrado azul muestra ... antes lo había copiado al _Layout.cshtml, que por lo menos tiene un <head> que me pareció más apropiado ponerlo allí ...

    Aquí te paso el código JavaScript que está en la View (.cshtml), me podrías decir qué está mal ... ?

    Muchas gracias!

    @page
    @model EmployeeDemoWebApp.Pages.DownloadsModel
    @{
        ViewData["Title"] = "Downloads";
    }
    
    <script type='text/javascript'>
    
        var CANVAS_WIDTH = 640;
        var CANVAS_HEIGHT = 480;
        var canvasElement = $("<canvas width = '" + CANVAS_WIDTH + "' height = '" + CANVAS_HEIGHT + "'></canvas>");
        var canvas = canvasElement.get(0).getContext("2d");
        canvasElement.appendTo('body');
    
        var player = {
            color: "#00A",
            x: 300,
            y: 420,
            width: 50,
            height: 50,
            draw: function () {
                canvas.fillStyle = "#00A";
                canvas.fillRect(this.x, this.y, this.width, this.height);
            }
        };
    
        var FPS = 50;
        setInterval(function () {
            update();
            draw();
        }, 1000 / FPS);
    
        function update() {
            if (keydown.left) {
                player.x -= 5;
            }
            else if (keydown.right) {
                player.x += 5;
            }
        }
    
        function draw() {
            canvas.fillStyle = "#000";
            canvas.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    
            player.draw();
        }
    </script>
    
    <link href="~/css/screen.css" media="all" rel="stylesheet" type="text/css" />
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" src="~/js/jquery.hotkeys.js" type="text/javascript"></script>
    <script language="javascript" src="~/js/key_status.js" type="text/javascript"></script>
    <script language="javascript" src="~/js/util.js" type="text/javascript"></script>
    <script language="javascript" src="~/js/sprite.js" type="text/javascript"></script>
    <script language="javascript" src="~/js/sound.js" type="text/javascript"></script>
    
    

    viernes, 17 de abril de 2020 0:35