I'm adding tweens to scene using scene.add.tween({config}) and the added tween plays automatically. How can I prevent this?
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('http://labs.phaser.io');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
}
function create ()
{
var logo = this.add.image(config.width / 2, config.height / 2, 'logo');
var tween_logo = this.add.tween({
targets: logo,
duration: 1000,
scale: 2,
ease: 'Linear',
yoyo: true,
repeat: -1
});
}
<script src="https://cdn.jsdelivr.net/gh/photonstorm/phaser#3.18.1/dist/phaser.min.js"></script>
In your tween config add the paused property and set it to true.
So, your tween config would be:
var tween_logo = this.add.tween({
targets: logo,
duration: 1000,
paused: true,
scale: 2,
ease: 'Linear',
yoyo: true,
repeat: -1
});
Here is a link to the docs for the config to see other properties:
Related
how to set frame of character?
here is my code
this.load.spritesheet(`dude-1`, `../src/assets/Character/ch-1.png`, {
frameWidth: 72,
frameHeight: 92,
});
main logic code is here
this.player = this.physics.add.sprite(100, -500, this.charSelect).setOrigin(1, 1);
this.player.body.setGravityY(1700);
this.player.setBounce(0.1);
this.physics.add.existing(this.player).body.setSize(15, 90, ).setOffset(20, 0)
this.anims.create({
key: "left",
frames: this.anims.generateFrameNumbers(this.charSelect, { start: 6, end: 10 }),
frameRate: 10,
repeat: -1,
});
this.anims.create({
key: "turn",
frames: [{ key: this.charSelect, frame: 5 }],
frameRate: 10,
});
this.anims.create({
key: "right",
frames: this.anims.generateFrameNumbers(this.charSelect, { start: 0, end: 4 }),
frameRate: 10,
repeat: -1,
});
cursors = this.input.keyboard.createCursorKeys();
this.physics.add.collider(this.player, this.platformGroup);
this.player.body.setCollideWorldBounds(true);
this.physics.world.setBounds(0, 0, (config.width) - 10, config.height, true, true, false, true);
here is output and issue. how to set the frame of character?
The problem is, that the phaser-image / frame size is too big (or the actual image is to small). Check the frame size (frameWidth and frameHeight) and the actual image size, that could solve your problem.
Here a short demo:
It loads the same spritesheet, once with the correct frameWidth / frameHeight size and once with a too big size.
document.body.style = `padding:0;margin:0;`;
class Example extends Phaser.Scene {
constructor() {
super();
}
preload() {
this.load.spritesheet('mummyCorrectSize', 'https://labs.phaser.io/assets/animations/mummy37x45.png', { frameWidth: 37, frameHeight: 45 });
this.load.spritesheet('mummyWrongSize', 'https://labs.phaser.io/assets/animations/mummy37x45.png', { frameWidth: 50, frameHeight: 50 });
}
create(){
// the "const" variables show the the wrong and right sprite creation
const wrongSizeSprite= this.add.sprite(50, 40, 'mummyCorrectSize').setOrigin(0);
const rightSizeSprite = this.add.sprite(50, 120, 'mummyWrongSize').setOrigin(0);
this.add.text(50, 10, 'Right size: single sprite/frame shown');
this.add.text(50, 100, 'Wrong size: the whole image is shown');
}
}
const config = {
type: Phaser.AUTO,
width: 500,
height: 180,
scene: [ Example ]
};
new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
I have looked at a bunch of different examples of peoples code and they are using something like:
this.game.debug
I have probably 20 combinations e.g.
this.game.debug
this.scene.debug,
this.scene.game.debug
etc.. but cannot find this debug, can anyone guide me on where to find this debug object?
Phaser 3 comes with physics debugger, that can be enabled by configuration.
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'arcade',
arcade: {
debug: true,
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
Here a working example, that gives you something like this:
I am using Phaser 3(3.24) and following is my config to initialize the game
GAME_CONFIG: {
type: Phaser.AUTO,
backgroundColor: '#fff',
scale: {
width: 1200,
height: 470,
mode: Phaser.Scale.ScaleModes.NONE,
},
parent: 'marathon-game',
physics: {
default: 'arcade',
fps: 60,
arcade: {
gravity: { y: 300 },
debug: true,
},
},
}
When I start my first scene and check this.scene.physics it returns undefined...any idea of why this would happen or what could I be doing wrong.
I think it's because your scene object is missing from the config. so if your scene is not a class use:
GAME_CONFIG: {
...the_rest_of_your_config
scene: {
preload: preload,
create: create,
update: update
}
}
Or:
GAME_CONFIG: {
...the_rest_of_your_config
scene: name_of_your_scene_class_goes_here
}
I use NodeJS with ChartJS to render graph directly to a file and it works fine.
I do it by ChartjsNodeCanvas npm module installed.
In order to display labels on the graph I use official ChartJS plugin ChartJS-plugin-datalabels
But it seems like Canvas module has a different scheme of activating ChartJS plugins and most probably I activate datalabels plugin incorrectly. So I can’t get the labels displayed on the graph.
const Chart = require('chart.js');
const datalabels = require('chartjs-plugin-datalabels')
const { CanvasRenderService } = require('chartjs-node-canvas');
const width = 600;
const height = 400;
const chartCallback = (ChartJS) => {
ChartJS.defaults.global.elements.rectangle.borderWidth = 2;
ChartJS.plugins.register({
datalabels
});
};
const canvasRenderService = new CanvasRenderService(width, height, chartCallback);
(async () => {
const configuration = {
type: 'bar',
data: {
datasets: [
{
type:"bar",
barThickness: 24,
label: 'My dataset',
data: ydata['data'],
backgroundColor: 'rgba(75,192, 192, 0.2)',
borderColor: 'rgba(54, 162, 135, 0.2)',
borderWidth: 1,
datalabels: {
align: 'start',
anchor: 'start'
}
},
labels: xdata,
}
options: {
scales: {
yAxes: [
{
id: 'left-y-axis',
position: 'left',
stacked: false,
ticks: {
beginAtZero: true,
callback: (value) => value + "R"
},
},
{
id: 'right-y-axis',
position: 'right'
}
],
xAxes: [{
stacked: true,
}]
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'red',
font: {
weight: 'bold'
},
formatter: Math.round
}
}
}
};
const image = await canvasRenderService.renderToBuffer(configuration);
fs.writeFileSync(tgMsgPath+"test.png", image)
})();
The chart is shown but no labels on the graph.
This is how to activate plugins with ChartJs-niode-canvas:
const chartJsFactory = () => {
const Chart = require('chart.js');
require('chartjs-plugin-datalabels');
delete require.cache[require.resolve('chart.js')];
delete require.cache[require.resolve('chartjs-plugin-datalabels')];
return Chart;
}
// ...
const canvasRenderService = new CanvasRenderService(
chartWidth,
chartHeight,
chartCallback,
undefined,
chartJsFactory
);
I dont know what to do...
Without hbox the grid appears,
but with hbox not.
I added with & height and flex to each child element,
but it doesnt work...
Thanks in advance!
And here's the code:
Ext.onReady(function() {
var myStore = Ext.create('Ext.data.SimpleStore', {
fields: [ 'bMin', ], });
var myData = [ { "bMin": 10, } ];
myStore.loadData(myData);
var grid = new Ext.grid.GridPanel({
layout : { type : 'hbox', align : 'stretch', flex:2,
Height: 150,
Width: 300,
},
cls: 'custom-grid',
store: myStore,
columns: [
{text: "bMin", dataIndex: 'bMin', type: 'float',},
],
viewConfig: {
emptyText: 'No records',
forceFit : true,
},
renderTo: Ext.getBody(),
});
var myPanel = new Ext.Panel({
layout : {
type : 'hbox',
align : 'stretch',
},
title: 'Hello',
minHeight : 150,
minWidth: 300,
Height: 150,
Width: 300,
items: [
grid,
{xtype: 'button', width: 50, height: 50, flex: 1}
],
renderTo: Ext.getBody()
});
});
On the Grid you don't need a 'layout' config, also when using an HBox Height and Width is ignored on the child components so using flex is the way to go. I also added a 'pack' attribute to the hbox layout.
Try this:
Ext.onReady(function() {
var myStore = Ext.create('Ext.data.SimpleStore', {
fields: [ 'bMin', ], });
var myData = [ { "bMin": 10, } ];
myStore.loadData(myData);
var grid = new Ext.grid.GridPanel({
flex: 1,
cls: 'custom-grid',
store: myStore,
columns: [
{text: "bMin", dataIndex: 'bMin', type: 'float',},
],
viewConfig: {
emptyText: 'No records',
forceFit : true,
},
renderTo: Ext.getBody(),
});
var myPanel = new Ext.Panel({
layout : {
type : 'hbox',
align : 'stretch',
pack: 'start'
},
title: 'Hello',
minHeight : 150,
minWidth: 300,
Height: 150,
Width: 300,
items: [
grid,
{xtype: 'button', flex: 1, text: 'test'}
],
renderTo: Ext.getBody()
});
});
JSFiddle Example:
http://jsfiddle.net/vzURb/2/
I see a number of problems here...
height and width config properties should not be capitalized
The flex, height, and width properties should all be on the panel itself, NOT on the panel's layout
The flex attribute will be weighted, so using flex: 1 on your button and flex: 2 on your panel will almost certainly not be what you are looking to do
You have renderTo on the grid, which is supposed to be inside your panel, so it should not use this config
You have commas at the ends of property lists, this can lead to lots of problems
You have type on a column, which is not a valid config
You don't need the layout on the grid
I can't tell exactly what it is that you want to do, but having an hbox layout with a button as the second item will look quite strange. But, if that is what you are intending, this is probably more what you want:
var grid = new Ext.grid.GridPanel({
cls: 'custom-grid',
store: myStore,
columns: [
{text: "bMin", dataIndex: 'bMin'}
],
viewConfig: {
emptyText: 'No records',
forceFit : true
}
});
var myPanel = new Ext.Panel({
layout : {
type : 'hbox',
align : 'stretch'
},
title: 'Hello',
height: 150,
width: 300,
items: [
grid,
{xtype: 'button', width: 50, height: 50, flex: 1}
],
renderTo: Ext.getBody()
});