Nothing showing with PhaserJS - javascript

I'm trying to learn phaser js and I'm following the tutorial but when run my code nothing is showing on the web browser. Here is my code:
<html>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = Phaser.Game(config);
function preload ()
{
this.load.image('player', 'assets/player.png');
this.load.image('sky', 'assets/sky.png');
}
function create ()
{
player = this.physics.add.image(640, 360);
this.add.image(640, 360, 'sky');
player.setBounce(0.2);
player.setColliderWorldBounds(true);
}
what am I doing wrong?

There are some points, that could cause problems(and/or are problematic), and/or should be checked:
your placing the sky ontop of the player. The order in which you add assets / images is important.
player = this.physics.add.image(640, 360) creates a image, with a physics-object, but if you don't pass a key, the image will not be displayed. that line change it to player = this.physics.add.image(640, 360, 'player');
If you don't configure physics the application will crash. (check the browser console for an error message), solution, change the configuration to this:
var config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
scene: {
preload: preload,
create: create,
update: update
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 }
}
},
};
btw.: the official phaser examples, are very helpful and showcase many functions of phaser in a tiny scope https://phaser.io/examples, they helped my to get started with phaser.
p.s.: when developing with html and javascript the browser-console is your best friend / tool, it shows error's and can help with debugging and alot more.

Related

GTmetrix Lighthouse Error on Wordpress Site

I'm having an issues which I can't pass the Lighthouse analysis for my Elementor Wordpress site using GTmetrix. I found the cause of the issue is because I have a render-blocking javascript element, which is Vanta.js that I used as my animation background. This is my initial code that I embed on a HTML via Elementor:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.halo.min.js"></script>
<script>
if (window.innerWidth > 1023) {
VANTA.HALO({
el: "#bg-halo",
mouseControls: true,
touchControls: false,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
backgroundColor: 0x000000,
xOffset: -0.35,
yOffset: -0.50,
size: 6.00
})
}
</script>
Then after some research, I tried to modify the code using async. The GTmetrix Lighthouse analysis pass, but the Vanta.js animation background sometimes doesn't showed up (if I refreshed the page for a couple of times it shows up, then not showed up again, then somehow showed up again). Here is the code I've embedded:
<script id="loadThree" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js" async></script>
<script id="loadHalo" src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.halo.min.js" async></script>
<script async>
let loadThree = document.querySelector("#loadThree");
loadThree.addEventListener("load", async function() {
console.log("THREE PASS");
let loadHalo = document.querySelector("#loadHalo");
loadHalo.addEventListener("load", async function() {
console.log("HALO PASS")
if (window.innerWidth > 1023) {
console.log("WINDOW PASS")
VANTA.HALO({
el: "#bg-halo",
mouseControls: true,
touchControls: false,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
backgroundColor: 0x000000,
xOffset: -0.35,
yOffset: -0.50,
size: 6.00
})
}
})
})
</script>
I've also tried with defer, the Vanta.js background animation works well, but the GTmetrix Lighthouse analysis doesn't pass.
Any helpful answer would be very appreciated!

I cannot get anything to load onto the canvas with the create function in Phaser 3

I cannot get the images to preload
I have tried converting it to a url, I have tried copying the to the file in the project folder and I have tried just putting the file name.
function preload(){
this.load.image('sky', 'assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.spritesheet('dude', 'assets/dude.png');
this.load.image('star', 'assets/star.png');
} // preloads all of the files I will need to make the game
function create() {
this.add.sprite(200, 200, 'star');
} // applies the files
function update() {
}// update every frame
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#FF0000',
physics: {
default: 'arcade',
arcade: {
gravity: {y:200},
debug: false
}
},
scene: {
preload,
create,
update
},
} // configures the game
var game = new Phaser.Game(config);
I would like to successfully display an image on the canvas, but it only shows a black box with some green lines on it. Any tips on how to fix this or what I am missing would be much appreciated, thanks.
function preload() {
this.load.image('sky', 'file:///home/chronos/u-fc7808c01e889e74148d1013b69f0a2241def976/Downloads/testprogram-atom.js/assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.spritesheet('dude', 'assets/dude.png');
this.load.image('star', '/home/jojobinks/Desktop/testprogram-atom.js/star.png');
}
function create() {
this.add.image(0, 0, 'sky');
}
function update() {
}
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#FF0000',
physics: {
default: 'arcade',
arcade: {
gravity: {y:200},
debug: false
}
},
scene: {
preload,
create,
update
},
}
var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.16.2/dist/phaser-arcade-physics.min.js"></script>
Open your browsers Dev Tools and look at the Network requests. Is it actually loading the file in? Or do you have 404 errors there? Also, you can't load from file:// and your game must be running from a web server. If you're just opening the index.html into your browser, it won't work. Please follow the Getting Started Guide on the Phaser site for more details.

Getting black screen for remote video: WebRTC

I'm developing video calling functionality with WebRTC and facing a very strange problem.
When I make a call everything is fine and I'm getting a remote video stream, but when I receive a call, I get a black screen with no remote video. The strange part is that when I refresh the page I get the remote video!
In the console, I'm getting the following thing:
Video constraints false
But when I refresh the page I get the video object.
This is my video container in index.html,
<video id="video-container" autoplay="autoplay" class="video-style"></video>
Main.js:
(function() {
var vertoHandle, vertoCallbacks, currentCall;
document.getElementById("make-call").addEventListener("click", makeCall);
document.getElementById("hang-up-call").addEventListener("click", hangupCall);
document.getElementById("answer-call").addEventListener("click", answerCall);
$.verto.init({}, bootstrap);
function bootstrap(status) {
vertoHandle = new jQuery.verto({
// ID of HTML video tag where the video feed is placed.
tag: "video-container",
deviceParams: {
// Asking for camera permissions and devices.
useCamera: 'any',
useMic: 'any',
useSpeak: 'any',
},
login: '1008#127.0.0.1',
passwd: '1234',
socketUrl: 'wss://127.0.0.1:8082',
ringFile: '',
iceServers: true,
}, vertoCallbacks);
};
vertoCallbacks = {
onWSLogin : onWSLogin,
onWSClose : onWSClose,
onDialogState: onDialogState,
}
function onWSLogin(verto, success) {
console.log('onWSLogin', success);
}
function onWSClose(verto, success) {
console.log('onWSClose', success);
}
function onDialogState(d) {
console.debug('onDialogState', d);
if(!currentCall) {
currentCall = d;
}
switch (d.state.name) {
case 'trying':
//
break;
case 'ringing':
alert('Someone is calling you, answer!');
break;
case 'answering':
//
break;
case 'active':
//
break;
case 'hangup':
//
break;
case 'destroy':
//
break;
}
}
function makeCall() {
vertoHandle.videoParams({
minWidth: 320,
minHeight: 240,
maxWidth: 640,
maxHeight: 480,
// The minimum frame rate of the client camera, Verto will fail if it's
// less than this.
minFrameRate: 15,
// The maximum frame rate to send from the camera.
vertoBestFrameRate: 30,
});
currentCall = vertoHandle.newCall({
useVideo: true,
mirrorInput: true,
destination_number : '3520',
caller_id_name : 'Test Caller',
caller_id_number: '1008',
outGoingBandwidth: 'default',
inComingBandwidth: 'default',
useStereo: true,
useMic: true,
useSpeak: true,
userVariables: {
email: 'test#test.com'
},
dedEnc: false,
});
}
function hangupCall() {
currentCall.hangup();
};
function answerCall() {
currentCall.answer();
}
})();
What's wrong with this code?
Thanks in advance!
So after some research, I've found the solution.
I was getting the error Video constraints false because they were set at the time of making a call, not at the time of receiving. So I manually set the property,
useVideo: true
after deviceParams.
Just like,
tag: "video-container",
deviceParams: {
// Asking for camera permissions and devices.
useCamera: 'any',
useMic: 'any',
useSpeak: 'any',
},
useVideo: true,
//other properties
Now I'm getting the video at the time of making a call too.

Cropper.js at angular 2: cropper displays the previos image

I build ionic2 application - based on angular 2.
In my app I use Cropper.js library for let user edit the images he loaded.
Now I have a problem.
When user load new picture, I show it at the main container and open the crop-box for this image.
But the crop-box show the previous image which was at the container.
The only solution that worked for me is to open the crop by setTimeout, but it is not good solution, as we know.
Any idea else?
Here is my code:
HTML - the container element:
<div class="selected-image">
<img *ngIf="currentImage.src != null" #selectedPhoto [src]="currentImage.src"/>
</div>
Now, after user click a button to add picture from the camera (by cordova plugin), and I get the image url, I push the picture to pictures array and then set currentImage variable to hold the new image.
Here is my typeScript code, it also have viewChild to hold the container.
Notice to the setTimeout block, now its is work but if I unwrap the code from setTimeout wrapper - it open the crop-box with the previous picture.
I also tried to change it to NgZone.run wrapper, but it didn't help.
export class myClass {
#ViewChild('selectedPhoto') input: ElementRef;
pictures: PictureData[] = new Array();
mainImage: PictureData = new PictureData();
private cropper: Cropper;
constructor(public _zone: NgZone) {}
function addPicture(){
var self = this;
Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
quality: 95,
targetHeight: 400,
targetWidth:400
}).then((imageURI) => {
var picture = {src:imageURI};
self._zone.run(() => {
self.pictures.push(picture);
self.currentImage = picture;
setTimeout(() => {
if (this.cropper && this.cropper['canvas']) {
this.cropper.destroy();
}
if (!this.cropper || !this.cropper['canvas']) {
this.cropper = new Cropper(this.input.nativeElement, {
aspectRatio: 1 / 1,
dragMode: 'crop',
modal: true,
guides: false,
center: true,
highlight: false,
background: false,
autoCrop: true,
autoCropArea: 0.9,
responsive: true,
checkCrossOrigin: false,
crop: (e: Cropper.CropperCustomEvent) => {
}
});
}
}, 2000);
});
});
}
}
P.S. If you are user with more then 1500 reputation, please, think about create new tag for 'cropper.js'.

Progress Bar with Sencha (JS)

I am new with Sencha, Javascript and HTML. I'm trying to make a progress bar (animated) using Sencha. I don't quite get how Sencha works. I need a step by step tutorial on how to do it? I want the output to be:
one without status percentage, and
one with percentage)?
below are my coding:
Ext.onReady(function(){
var pb = Ext.create('Ext.ProgressBar', {
margin: 50,ui:'default'
});
// Wait for 5 seconds, then update the status el (progress bar will auto-reset)
pb.wait({
interval: 500, //bar will move fast!
duration: 50000,
increment: 15,
text: "Hi, I've got a custom UI...",
scope: this,
fn: function(){
p.updateText('Done!');
}
});
var pa = Ext.create("Ext.panel.Panel", {
title: "I'm a regular 'default' UI Panel",
width: 500,
items: pb, // put the progressbar in our panel
floating: true,
renderTo: Ext.getBody(),
closable: true
})
})

Categories