I literally copied the code from the getting started section of the Matter.js library but an Uncaught TypeError occurs: "Engine.run is not a function".
I searched everywhere on the web but nothing helps. As a precaution, I added an event listener to run the code once everything is loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.9.2/matter.min.js" type="text/javascript"></script>
<title>Matter.js example</title>
</head>
<body>
<script type="text/javascript">
window.addEventListener("load",init);
function init() {
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
// run the engine
Engine.run(engine);
// run the renderer
Render.run(render);
}
</script>
</body>
</html>
Please, what am i doing wrong ?
You are using wrong version of matter-js library, try with latest version. I just tried with 0.15.0, it's working fine.
matter-js >= 0.10.0 has the support Render.run(). Please make sure the version which you are using for supported features.
window.addEventListener("load",init);
function init() {
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
// run the engine
Runner.run(engine);
// run the renderer
Render.run(render);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.0/matter.min.js" type="text/javascript"></script>
<title>Matter.js example</title>
</head>
<body>
</body>
</html>
Related
I tried set my path with link from web and path of PC and didn't work, ever display this green square my screen:
My game.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create,
update: update
}
};
var debug;
var source;
var target = new Phaser.Math.Vector2();
var distanceText;
new Phaser.Game(config);
function preload ()
{
this.load.image('worm', 'assets/worm.png');
}
function create ()
{
source = this.physics.add.image(100, 300, 'worm');
debug = this.add.graphics();
this.input.on('pointerdown', function (pointer) {
target.x = pointer.x;
target.y = pointer.y;
this.physics.moveToObject(source, target, 250);
}, this);
distanceText = this.add.text(10, 10, 'Click to set target', { fill: '#00ff00' });
}
function update ()
{
var distance = Phaser.Math.Distance.Between(source.x, source.y, target.x, target.y);
if (source.body.speed > 0)
{
distanceText.setText('Distância: ' + distance);
if (distance < 4)
{
source.body.reset(target.x, target.y);
}
}
}
</script>
</body>
</html>
That's like I said, nothing worked with url or path from my pc, I just want to display my sprite player on screen without that green square and I saw another questions, but nothing offered me a solution, what can I do?
It seems like it can't find the image its looking for, which means that either it doesn't exist, or more likely it doesn't exist in the location you've provided.
If you're serving this web page from the root (aka it's visible on http://localhost or http://127.0.0.1 than you could try simply adding a / in front of the path, as such: /assets/worm.png, the leading / means it'll search for the asset from the root of your webpage.
I found this http://jsfiddle.net/fabricjs/fmgXt/ example on loading rect and circle,
// Do some initializing stuff
fabric.Object.prototype.
set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
var json = '{"objects":[{"type":"rect","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#29477F","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0},{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100}],"background":""}'
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
fabric.log(o, object);
});
and I need to load polygon from json, how do i do it?
const canvas = new fabric.Canvas('canvas', { width: 600, height: 600, backgroundColor: '#e4ede6' });
const json = {"objects":[{"type":"rect","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#29477F","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0},{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100}],"background":""};
(async () => {
const objects = await new Promise(resolve => fabric.util.enlivenObjects(json.objects, resolve));
canvas.add(...objects)
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://unpkg.com/fabric#4.6.0/dist/fabric.min.js"></script>
</body>
</html>
So I was in the middle of game development with Phaser 3 and this error showed up in the console:
Cannot read property 'startSystem' of undefined
Here is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding:0px;
margin: 0px;
overflow: hidden;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shoot'Em</title>
<script src="phaser.min.js"></script>
<script src="game.js"></script>
</head>
<body>
</body>
</html>
And here is my Javascipt/Phaser Code:
var config = {
type: Phaser.AUTO,
width: window.innerWidth,
height:window.innerHeight,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
var platforms
function preload ()
{
this.load.image('player1', 'Player.png')
this.load.image('player2', 'Player2.png')
this.load.image('platform', 'Platform.png')
}
function create ()
{
🛑🛑🛑----➤game.physics.startSystem(Phaser.Physics.ARCADE);<---🛑🛑🛑🛑🛑
//Create Platforms
platforms.create(400, 568, 'platform').setScale(2).refreshBody();
platforms.create(600, 400, 'platform').setScale(0.1).refreshBody();
platforms.create(50, 250, 'platform').setScale(0.1).refreshBody();
platforms.create(750, 220, 'platform').setScale(0.1).refreshBody();
//Player 1
player1 = this.physics.add.sprite(100, -200, 'player1');
player1.setBounce(0.95);
player1.setCollideWorldBounds(true);
player1.body.setGravityY(300);
this.physics.add.collider(player1, platforms);
//Player 2
player2 = this.physics.add.sprite(300, -200, 'player2');
player2.setBounce(0.95);
player2.setCollideWorldBounds(true);
player2.body.setGravityY(300);
this.physics.add.collider(player2, platforms);
emitter = game.add.emitter(0, 0, 100);
emitter.makeParticles('player1');
emitter.gravity = 0;
game.input.onDown.add(particleBurst, this);
}
function particleBurst(pointer) {
emitter.x = pointer.x;
emitter.y = pointer.y;
emitter.start(true, 2000, null, 10);
}
Where the stop signs are is where the program stops.
I'm running on a local host.
FYI ALL THE FILES USED IN THE CODE ARE IN THE SAME FOLDER
Any help will be welcomed!
There are some errors I found in your example, maybe these steps will help to fix it:
You don't need to call game.physics.startSystem(Phaser.Physics.ARCADE); at all. Just remove this line.
Add update function
platforms.create will fail since platforms are not initialized. Here is example about groups
game.add will also fail - you don't need game, use this to access current scene.
There are a lot of examples with Phaser 2 that uses game, but in Phaser 3 you can just access the scene from create and update to add new objects.
I'm new to js and html, I would like to get into Aframe.
I want to go from declarative form to create a scene to programmatical way using js to create it :
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - A-Frame School</title>
<meta name="description" content="JavaScript - A-Frame School">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
<a-scene school-playground>
<a-box position="-1 0 -4.25" rotation="0 45 0" color="red" ></a-box>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
To something like that :
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - A-Frame School</title>
<meta name="description" content="JavaScript - A-Frame School">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('school-playground', {
init: function () {
var body = document.querySelector('body');
var sceneEl = document.createElement("a-scene");
var body = document.querySelector('body');
sceneEl.setAttribute("embedded", true);
sceneEl.style.height="700px";
sceneEl.style.width="100%";
sceneEl.setAttribute("school-playground", "");
var myBox = document.createElement('a-box');
myBox.setAttribute('position', {x:-1, y:0, z:-4})
myBox.setAttribute('rotation', {x:0,y:45, z:0}
myBox.setAttribute('color', "red");
sceneEl.appendChild(myBox);
body.appendChild(sceneEl);
//I also tried document.body.appendChild(sceneEl);
}
});
</script>
</head>
<body>
</body>
</html>
It doesn't seem possible to do it properly. Do I need to keep the scene statically defined ?
Thanks for your help.
Components initialize when attached to entities (https://aframe.io/docs/0.8.0/introduction/writing-a-component.html#using-property-data-from-a-lifecycle-handler). Your component is just registered but not associated to any entity so the init method won't run. You can programmatically create a scene as any other regular DOM component in JavaScript similarly to what you did but remember to do it outside of a component and append the scene to the document:
var sceneEl = document.createElement("a-scene");
...
document.body.appendChild(sceneEl);
You can also define your <a-scene> tag statically and then populate the scene:
sceneEl = document.querySelector("a-scene");
... create and append scene entities ...
sceneEl.appendChild(yourEntity);
I also recommend upgrading your A-Frame version to 0.8.0
Full runnable example on Glitch: https://glitch.com/edit/#!/conscious-way
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
</body>
<script>
var sceneEl = document.createElement('a-scene');
sceneEl.setAttribute('background', {color: 'red'});
var cubeEl = document.createElement('a-box');
cubeEl.setAttribute('color', 'blue');
cubeEl.setAttribute('position', '0 1.5 -2');
sceneEl.appendChild(cubeEl);
document.body.appendChild(sceneEl);
</script>
</html>
Here's what I write for the moment (the scene does not appear):
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - A-Frame School</title>
<meta name="description" content="JavaScript - A-Frame School">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('school-playground', {
/**
* Code within this function will be called when everything in <a-scene> is ready and loaded.
*/
init: function () {
//var body = document.body;
// var sceneEl = document.querySelector('a-scene');
var sceneEl = document.createElement("a-scene");
var body = document.querySelector('body');
sceneEl.setAttribute("embedded", true);
//sceneEl.setAttribute("class", "fullscreen");
sceneEl.style.height="700px";
sceneEl.style.width="100%";
var camera = document.createElement("a-entity");
camera.setAttribute("camera", "userHeight: 1.6");
camera.setAttribute("look-controls", {enabled: true});
camera.setAttribute("wasd-controls", "");
camera.setAttribute("active", true);
sceneEl.appendChild(camera)
//cylinder creation using the necessary attributes
var cylinder = document.createElement('a-cylinder');
cylinder.setAttribute('color', '#FF9500');
cylinder.setAttribute('height', '2');
cylinder.setAttribute('radius', '0.75');
cylinder.setAttribute('position', '3 1 -4');
sceneEl.appendChild(cylinder);
//box creation using the necessary attributes
for (var i =0; i < 50; i++){
var myBox = document.createElement('a-box');
myBox.setAttribute('position', {x:Math.random()* 5-2.5 , y: Math.random()* 5-2.5 ,z : Math.random()* 5-7})
myBox.setAttribute('scale', {x: Math.random() / 1.25, y: Math.random() / 1.25, z: Math.random() / 1.25});
myBox.setAttribute( 'material', {color: '#00bfff'});
myBox.setAttribute('material', {visible: true});
myBox.setAttribute('rotation', {x: 0, y: 0, z: 0});
sceneEl.appendChild(myBox);
}
document.body.appendChild(sceneEl);
}
});
</script>
</head>
<body>
</body>
</html>
I'm making a very basic game in Javascript using the Phaser Directory. I have made games with Phaser many times before but this time I have come across an issue that is new to me and I've never had before. I've looked it up online and no one seems to have had this problem. In phaser it is telling me my "x" is not defined when I refer to x as a position. How would I go about defining x as a position or what error am I facing? I and currently using VS Code on mac with a Chrome browser and newest version of Phaser.
Thanks for the Help,
Murdoc
var game = new Phaser.Game(640, 360, Phaser.Auto);
var car1;
var GameState = {
preload: function(){
game.load.image("thecar1", "../assets/car_1.png");
//game.load.image("thecar2", "../assets/car_2.png");
//game.load.image("backgroundImg", "../assets/thebackground.png");
},
create: function(){
var car1 = game.add.sprite(200, 270, "thecar1");
//var car2 = game.add.sprite(200, 270, "thecar2");
/*game.input.keyboard.addKey(Phaser.Keyboard.W)
.onDown.add(car1Up);*/
game.input.keyboard.addKey(Phaser.Keyboard.A)
.onDown.add(car1Left);
/*game.input.keyboard.addKey(Phaser.Keyboard.S)
.onDown.add(car1Down);
game.input.keyboard.addKey(Phaser.Keyboard.D)
.onDown.add(car1Right);*/
},
update: function(){
}
};
function car1Left() {
car1.x = car1.x + 10;
}
game.state.add('GameState', GameState);
game.state.start('GameState');
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pixel Soccer</title>
<script src="phaser.js"></script>
<script src="main.js"></script>
<style>
body {
background: white;
margin: 0;
padding: 0;
}
body canvas {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
</body>
</html>
You're declaring the same variable twice. You're dealing with what's called "variable shadowing". When you do var car1 = game.add.sprite(200, 270, "thecar1"); in the create() function, the scope changes to function-only and the variable with the sprite you assign to it is only available in the scope of that function. The error basically comes to tell you that var car1 that you declared outside of the function scope is undefined (which it is). Try doing just car1 = game.add.sprite(200, 270, "thecar1"); inside create() and it should be fine.