expressraider: abril 2019

Crear juego con Phaser y ejecutarlo en Android

https://gamedevacademy.org/creating-mobile-games-with-phaser-3-and-cordova/

PARA QUE FUNCIONE EN ANDROID, LA RUTA A PHASER TIENE QUE SER LOCAL!!

Ej de codigo:

<!DOCTYPE html>
<html>
<head>
<script src="./node_modules/phaser/dist/phaser.js"></script>
</head>
<body>

<script>

var config = {
type: Phaser.AUTO,
width: 400,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};

var game = new Phaser.Game(config);

var bmd;
var tooltip;
var sprite;
var pelota;
var rojo_strong;
var rojo_soft;
var verde_strong;
var verde_soft;
var amarillo_strong;
var amarillo_soft;
var boton_comenzar;

//------------------
var ensecuencia = false;
var finsecuencia = false;
var ind = 0;
var vecX = new Array();
var fin = false;
var interv;
var intervInicial;
var enjuego = false;

var indclick = 0;
const TIEMPO_ON = 300;

ensecuencia = false;

habilitar(false);
//------------------

function preload ()
{
this.load.image('pelota', 'assets/pelota.png');
this.load.image('rojo_strong', 'assets/rojo_strong.png');
this.load.image('rojo_soft', 'assets/rojo_soft.png');

this.load.image('verde_strong', 'assets/verde_strong.png');
this.load.image('verde_soft', 'assets/verde_soft.png');

this.load.image('amarillo_strong', 'assets/amarillo_strong.png');
this.load.image('amarillo_soft', 'assets/amarillo_soft.png');

this.load.image('azul_strong', 'assets/azul_strong.png');
this.load.image('azul_soft', 'assets/azul_soft.png');

this.load.image('naranja_strong', 'assets/naranja_strong.png');
this.load.image('naranja_soft', 'assets/naranja_soft.png');

this.load.image('magenta_strong', 'assets/magenta_strong.png');
this.load.image('magenta_soft', 'assets/magenta_soft.png');

this.load.image('boton_comenzar', 'assets/bitmap.png');
}

function create ()
{
var xSprite = 200;
pelota = this.add.sprite(xSprite, 300, 'pelota');

rojo_soft = this.add.sprite(xSprite, 300, 'rojo_soft').setInteractive({ pixelPerfect: true });
rojo_strong = this.add.sprite(xSprite, 300, 'rojo_strong');

verde_soft = this.add.sprite(xSprite, 300, 'verde_soft').setInteractive({ pixelPerfect: true });
verde_strong = this.add.sprite(xSprite, 300, 'verde_strong');

amarillo_soft = this.add.sprite(xSprite, 300, 'amarillo_soft').setInteractive({ pixelPerfect: true });
amarillo_strong = this.add.sprite(xSprite, 300, 'amarillo_strong');

azul_soft = this.add.sprite(xSprite, 300, 'azul_soft').setInteractive({ pixelPerfect: true });
azul_strong = this.add.sprite(xSprite, 300, 'azul_strong');

naranja_soft = this.add.sprite(xSprite, 300, 'naranja_soft').setInteractive({ pixelPerfect: true });
naranja_strong = this.add.sprite(xSprite, 300, 'naranja_strong');

magenta_soft = this.add.sprite(xSprite, 300, 'magenta_soft').setInteractive({ pixelPerfect: true });
magenta_strong = this.add.sprite(xSprite, 300, 'magenta_strong');

boton_comenzar = this.add.sprite(xSprite, 378, 'boton_comenzar').setInteractive({ pixelPerfect: true });

rojo_strong.visible = false;
verde_strong.visible = false;
amarillo_strong.visible = false;
azul_strong.visible = false;
naranja_strong.visible = false;
magenta_strong.visible = false;

rojo_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('6');

rojo_strong.visible = true;
setTimeout(function() {
rojo_strong.visible = false;
}, TIEMPO_ON);
}
});

verde_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('1');

verde_strong.visible = true;
setTimeout(function() {
verde_strong.visible = false;
}, TIEMPO_ON);
}
});

amarillo_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('2');

amarillo_strong.visible = true;
setTimeout(function() {
amarillo_strong.visible = false;
}, TIEMPO_ON);
}
});

azul_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('3');

azul_strong.visible = true;
setTimeout(function() {
azul_strong.visible = false;
}, TIEMPO_ON);
}
});

naranja_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('4');

naranja_strong.visible = true;
setTimeout(function() {
naranja_strong.visible = false;
}, TIEMPO_ON);
}
});

magenta_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('5');

magenta_strong.visible = true;
setTimeout(function() {
magenta_strong.visible = false;
}, TIEMPO_ON);
}
});

boton_comenzar.on('pointerdown', function(pointer){
if (!enjuego) {
start();
}
});

}

function update ()
{
}

function comenzar() {
Math.random();

habilitar(true);

agregar();

secuenciar();
}

function start() {
Math.random();

habilitar(true);

agregar();

secuenciar();
}

function habilitar(habil) {

boton_comenzar.visible = !habil;

enjuego = habil;
}

function iluminar(color, mantener=false) {
if (mantener)
t = TIEMPO_ON * 4;
else
t = TIEMPO_ON;

if (color == 1) {
verde_strong.visible = true;

setTimeout(function() {
verde_strong.visible = false;
}, t);
}

if (color == 2) {
amarillo_strong.visible = true;

setTimeout(function() {
amarillo_strong.visible = false;
}, t);
}

if (color == 3) {
azul_strong.visible = true;

setTimeout(function() {
azul_strong.visible = false;
}, t);
}

if (color == 4) {
naranja_strong.visible = true;

setTimeout(function() {
naranja_strong.visible = false;
}, t);
}

if (color == 5) {
magenta_strong.visible = true;

setTimeout(function() {
magenta_strong.visible = false;
}, t);
}

if (color == 6) {
rojo_strong.visible = true;

setTimeout(function() {
rojo_strong.visible = false;
}, t);
}

}

function agregar() {
vecX.push(Math.floor(Math.random() * 6) + 1);
}

function secuenciar() {
iluminar(vecX[ind]);

ind++;
if (ind > vecX.length-1)
{
ensecuencia = false;
ind = 0;
return;
}

interv = setInterval(function() {
iluminar(vecX[ind]);

ind++;
if (ind > vecX.length-1)
{
clearInterval(interv);
ensecuencia = false;
ind = 0;
}
}, 1000);
}

function selecciono(numero)
{
if (!enjuego)
return;

if (vecX[indclick] == numero)
{
indclick++

if (indclick > vecX.length-1)
{
indclick = 0;

setTimeout(function() {
agregar();

secuenciar();
}, 1000);
}
}
else {

iluminar(vecX[indclick], true);
detener();
}
}

function detener() {
clearInterval(interv);
clearInterval(intervInicial);
vecX.length = 0;
ind = 0;
indclick = 0;
habilitar(false);
}

</script>

</body>
</html>

Como hacer funcionar el emulador de Android

1. Instalar Android Studio

2. En la pantalla inicial de Android Studio, ir a Configure / AVD Manager

3. Create virtual device / Nexus 5X API 24

4. Ir al SETUP de la BIOS y activar la virtualizacion (en Hp envy, F10 cuando reinicio, luego System config / enable virtualization)

5. Para ver los emuladores instalados:

cd c:\Users\Carlos\AppData\Local\Android\Sdk\tools

emulator -list-avds

Nexus_5X_API_24

6. Ir a la carpeta de la aplicacion

cordova emulate android

*** Si el emulador no arranca o dice waiting for emulator to start, ir al AVD en Android Studio, click derecho sobre el emulador y Cold Reset y Wipe Data ***

Render de videos para Whatsapp en Sony Vegas

En la pantalla del preview, en la rueda de propiedades (arriba a la izquierda) elegir:

HDV 720-25p (1280x720, 25.000fps)

o

HD 1080-50i (1920X1080, 25.000fps)

Frame rate (velocidad de fotogramas): 25.000 (PAL)
Full resolution rendering (Calidad de renderizacion...): Best

Apply / OK

File / Render

Sony AVC/MVC (*.mp4,*.m2ts,*.avc)
Internet 1280x720-30p (Si arriba elegi HDV 720)

Customize template...
Profile: Main
Frame rate: 25.000 (PAL)
Bit rate (bps): 1,000,000 <=== para achicar mas el video, bajar este número

En ficha Project: Video rendering quality: Best

Ponerle un nombre al template y guardarlo

No se instalo la aplicacion - Android

Instalar ApkEditor (version 1-9-0, la mas nueva no sirve)

https://drive.google.com/open?id=14nH68spiZNMAfadNBb7SN1xEhB9hPMvX

-Seleccionar un Archivo APK
-Edicion Rapida

Modificar el nombre de la aplicacion (ej, si es MyApp, ponerle MyAppX)

-Guardar

-DESINSTALAR LA APLICACION SI YA FUE PREVIAMENTE INSTALADA

-Instalar

Enviar valor del campo en evento blur con javascript

Exportar tracks individuales en Reaper

https://www.doctormix.com/blog/how-to-export-multiple-tracks-in-reaper

Angular FlexLayout

https://alligator.io/angular/flex-layout/

https://alligator.io/angular/flex-layout/

Instalación:

npm install @angular/flex-layout --save

import { FlexLayoutModule } from "@angular/flex-layout";

agregar en imports:

FlexLayoutModule

Ejemplo:

<mat-card>
<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0%" fxLayoutAlign="center">
<div fxFlex="60%" style="background-color: gray;">

<form (ngSubmit)="login()">
<div>
<mat-form-field>
<input matInput placeholder="Usuario" [(ngModel)]='usuario' name='usuario'>
</mat-form-field>
</div>

<div>
<mat-form-field>
<input matInput placeholder="Password" [(ngModel)]='password' name='password' type="password">
</mat-form-field>
</div>

<button mat-raised-button color="primary" type="submit">Enviar</button>
</form>
</div>

<div fxFlex="40%" style="background-color: lightyellow;">
Ingrese sus datos
</div>
</div>
</mat-card>

Creacion de nuevo sitio Angular Material

https://www.smashingmagazine.com/2018/10/news-application-with-angular-and-material-design/

ng new proyecto1
cd proyecto1

npm install --save @angular/material @angular/animations @angular/cdk

ng serve

en app.module.ts, agregar todos los modulos que figuran en este link:

https://expressraider.blogspot.com/2019/02/importacion-de-todos-los-modulos-de.html?m=0

Como utilizar el TemplateAngular

Obtener ultima version de

_TEMPLATES\TemplateAngular

Renombrar la carpeta (ej, Creditos)

editar los siguientes archivos y cambiar el nombre "programa1" por el del sitio (en este ejemplo, Creditos)

package.json
src\index.html
package-lock.json
angular.json

quitar los atributos readonly para poder compilarlo.

Eliminar ApplicationInsights Telemetry de todos los sitios web

Ejecutar como administrador IIS, y sobre el Default Web Site:

Quitar:

Módulos / ApplicationInsighsWebModule

Esta acción modifica los web.config de todas las aplicaciones web que esten en el Default Web Site:

Por lo tanto, deben estar sin readonly (pueden ocurrir errores por este tema)