Scale Movieclip child elements using CreateJS - javascript

My old project is developed using Createjs. I need to scaleout movieclip but it's not scaling it's child objects.
let stage = new createjs.Stage('canvas2');
stage.mouseMoveOutside = true;
stage.enableMouseOver(30);
let mc = new createjs.MovieClip();
let circle = new createjs.Shape(
new createjs.Graphics().beginFill("#999999").drawCircle(0,0,100)
);
mc.addChild(circle)
stage.addChild(mc)
let img = new Image();
img.src="images/testimages/we2.jpg";
img.onload=(e)=>{
let b = new createjs.Bitmap(e.target);
mc.addChild(b);
mc.scale=.2;
setTimeout(()=>{
mc.scale=.2;
},1000)
}
window.createjs.Ticker.addEventListener('tick',function(e){
stage.update(e);
})
I need to scale Movieclip after loading image but it's doing nothing.

Instead of using mc.scale=.2;, if I chain the X and Y settings then it works:
mc.scaleX = mc.scaleY = 0.2;

Related

can't draw image to canvas unless I use setInterval?

const canvas = document.querySelector('#snake');
const ctx = canvas.getContext('2d');
//create canvas unit
const box = 32;
//load image files
const ground = new Image();
ground.src = 'img/ground.png';
const food = new Image();
food.src = 'img/food.png';
//load audio files
let dead = new Audio();
let eat = new Audio();
let up = new Audio();
let down = new Audio();
let left = new Audio();
let right = new Audio();
dead.src = 'audio/dead.mp3';
eat.src = 'audio/eat.mp3';
left.src = 'audio/left.mp3';
up.src = 'audio/up.mp3';
down.src = 'audio/down.mp3';
right.src = 'audio/right.mp3';
//create snake
let snake = [];
//draw canvas
ctx.drawImage(ground, 0, 0)
canvas {
display: block;
margin: 0 auto;
}
<canvas id="snake" width="608" height="608"></canvas>
I'm following a tutorial on YouTube on how to make a snake game with javascript. I copied his code and commented it out. Now I'm reconstructing it piece by piece to see how it works, but not step by step.
For instance once i created the global variables i wanted to draw the background image to the canvas just to look at it ctx.drawImage(ground, 0, 0); this by itself doesn't work. Watching him do it in the video he creates a draw function, puts that code in it, then sets the function to run at an interval of 100ms.
function draw() {
ctx.drawImage(ground, 0, 0);
}
let game = setInterval(draw, 100);
Now it works?? what's happening?
here's his github https://github.com/CodeExplainedRepo/Snake-JavaScript
I'm know i'm late. I was asking myself the same question after seeing that tutorial...
But still, you can pass this problem by simply adding the property background-image :
canvas id="snakeCanvas" width="608" height="608" style="background-image: url(img/ground.png)"

Pixi is not changing position when click on sprite

I was trying to create a sample pixi application. Where I had an image, when user clicks on the image, it should move its position.
var canvasWidth = window.innerWidth;
var canvasHight = window.innerHeight
var renderer = PIXI.autoDetectRenderer(canvasWidth, canvasHight);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
PIXI.loader
.add('images/sample.png')
.add('images/background.jpg')
.load(setup);
function setup() {
var backGround = new PIXI.Sprite(
PIXI.loader.resources["images/background.jpg"].texture);
var steve = new PIXI.Sprite(
PIXI.loader.resources["images/sample.png"].texture);
backGround.hieght = canvasHight;
backGround.width = canvasWidth;
setPropertiesToSteve(steve);
stage.addChild(backGround);
stage.addChild(steve);
renderer.render(stage);
}
// Function just to set properties for steve
function setPropertiesToSteve(steve) {
steve.interactive = true;
steve.position.x = canvasWidth/2;
steve.position.x = canvasWidth/4;
steve.on('pointerdown',function(){
steve.position.x = steve.position.x + 10;
});
}
But when I click on the object nothing happening. I am very much new to pixijs.SO don't know how to handle this.
You need to render the stage again :)
Take a look at the official Pixi examples https://pixijs.github.io/examples/
They use the PIXI.Application class which sets up common things like a ticker that automatically re renders your stage

Loading Blender scene in BabylonJS

I made a scene in Blender that I exported into a .babylon, and now I am importing it into the game. The map is 351KB, and I am loading it into the game like this:
var BABYLON;
var canvas = document.getElementById('gamecanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight('light', new BABYLON.Vector3(0,0,10), scene);
var player = new BABYLON.FreeCamera('player', new BABYLON.Vector3(1,1,1), scene); //IMPORTANT LINE
var player_height = 2;
var player_speed = 1;
var player_inertia = 0.9;
var mouse_position = new BABYLON.Vector2(mouse_position.x, mouse_position.y);
function INIT_GAME(){
engine.runRenderLoop(function(){ //IMPORTANT LINE
scene.render();
});
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
canvas.requestPointerLock();
scene.enablePhysics(); //IMPORTANT LINE
scene.setGravity(new BABYLON.Vector3(0, -10, 0)); //IMPORTANT LINE
player.attachControl(canvas, true); //IMPORTANT LINE
player.ellipsoid = new BABYLON.Vector3(1, player_height, 1);
player.checkCollisions = true;
player.applyGravity = true;
player.keysUp = [87];
player.keysDown = [83];
player.keysLeft = [65];
player.keysRight = [68];
player.inertia = player_inertia;
player.speed = player_speed;
window.addEventListener('resize', function(){
engine.resize();
});
BABYLON.SceneLoader.Load('Scenes', 'zombie_map.babylon', engine); //IMPORTANT LINE
}
I've attempted to narrow everything down to what you should need to look at, but I left it all there just in case there was something I missed. (INIT_GAME is loaded on page load). My problem is, I think the scene is loading, but it just gives me a strange loading icon, which I presume is just Babylon trying to load in the scene I passed it. My questions are:
Am I loading everything in properly?
What is the proper format to import a .babylon scene?
Is the size of the map too big for the browser, and if so, how can I compress it?
I can provide a link to the site if you need to see the results head-on. Let me know, thanks!
I think the solution is very simple.
Add a slash after your rootURL.
So replace
BABYLON.SceneLoader.Load('Scenes', 'zombie_map.babylon', engine); //IMPORTANT LINE
with
BABYLON.SceneLoader.Load('Scenes/', 'zombie_map.babylon', engine); //IMPORTANT LINE
Try this and let me know how it goes.

using preload.js and create.js load an image?

I am following up with a game development tutorial for windows 8 here http://www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-game-basics-createjseaseljs/.
The tutorial probably needs updating since at some point i had to add in createJS before using PreloadJS.
example:
stage = new createjs.Stage(canvas);
preload = new createjs.PreloadJS();
or else the debugging throws errors.
However the program breaks when bgImage is initialised. Any suggestive codes i can use?
bgImage = preload.getResult("screenImage").Result;
bgBitmap = new Bitmap(bgImage);
bgBitmap.scale_X = SCALE_X;
bgImage.scale_Y = SCALE_Y;
stage.addChild(bgBitmap);
stage.update();
Please make sure you are using correct syntax.
var bgImage = preload.getResult("screenImage").result;
var bgBitmap = new createjs.Bitmap(bgImage);
stage.addChild(bgBitmap);
Also what is the bug you are getting?
Here is a quick example that should help.
function init() {
canvas = document.getElementById("testCanvas");
//check to see if we are running in a browser with touch support
stage = new createjs.Stage(canvas);
createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
images = images || {};
var manifest = [
{src:"image.jpg", id:"image"}
]
loader = new createjs.PreloadJS(false);
loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;
loader.loadManifest(manifest);
}
function handleFileLoad(o) {
//You could store all your images in object to call them easily.
if (o.type == "image") {
images[o.id] = o.result;
}
}
function handleComplete(event) {
var bg = new createjs.Bitmap(loader.getResult("image").result);
//OR samething
//var bg = new createjs.Bitmap(images['image']);
stage.addChild(bg);
}
function tick() {
stage.update();
}
Hope this helps.

small JavaScript Box2D program without gravity has things moving anyway... why?

I have a small Box2D thing (using box2dweb.js), but despite setting gravity to (0,0), and no forces/impulse being imparted on any objects, the only dynamic shape I have in the scene moves when I start the draw loop. I have no idea why O_O
Would anyone know why http://pomax.nihongoresources.com/downloads/temp/box2d/physics.html has the "ball" moving after hitting start?
The relevant bits of code are:
// shortcut aliasses
var d = Box2D.Dynamics,
v = Box2D.Common.Math,
s = Box2D.Collision.Shapes;
var ball,
gravity = new v.b2Vec2(0,0);
world = new d.b2World(gravity, true);
// setup the world box
var setupWorldBox = function(worldbox) {
var fixDef = new d.b2FixtureDef;
fixDef.density = 0;
fixDef.friction = 0;
fixDef.restitution = 0;
var bodyDef = new d.b2BodyDef;
bodyDef.type = d.b2Body.b2_staticBody;
bodyDef.position.x = worldbox.width/2;
bodyDef.position.y = worldbox.height/2;
fixDef.shape = new s.b2PolygonShape;
fixDef.shape.SetAsBox(worldbox.width/2, worldbox.height/2);
world.CreateBody(bodyDef).CreateFixture(fixDef);
}
// draw loop
var drawFrame = function() {
world.Step(1/60,10,10);
world.ClearForces();
ball.update(); // only updates the ball's DOM element position
requestAnimFrame(drawFrame);
};
// start the game
function start() {
var worldParent = document.querySelector("#world");
setupWorldBox(worldParent.getBoundingClientRect());
ball = new Ball(worldParent, document.querySelector(".ball"), d,v,s, world);
drawFrame();
}
For the main body, and the following code for defining the "ball":
var Ball = function(gamediv, element, d,v,s, world) {
var pbbox = gamediv.getBoundingClientRect();
var bbox = element.getBoundingClientRect();
this.el = element;
this.width = bbox.width;
this.height = bbox.height;
var bodyDef = new d.b2BodyDef;
bodyDef.type = d.b2Body.b2_dynamicBody;
var fixDef = new d.b2FixtureDef;
fixDef.shape = new s.b2PolygonShape;
fixDef.shape.SetAsBox(bbox.width/2, bbox.height/2);
bodyDef.position.x = bbox.left - pbbox.left;
bodyDef.position.y = bbox.top - pbbox.top;
this.b2 = world.CreateBody(bodyDef);
this.b2.CreateFixture(fixDef);
};
Ball.prototype = {
el: null,
b2: null,
width: 0, height: 0,
// Box2D position for the ball
center: function() { return this.b2.GetWorldCenter(); },
// update the DOM element based on Box2D position
update: function() {
var c = this.center();
this.el.style.left = c.x + "px";
this.el.style.top = c.y + "px";
}
};
Ball.prototype.constructor = Ball;
Neither of these bits of code introduces forces, as far as I can tell, so if anyone knows why the coordinates for the ball change anyway, please let me know, so I can turn this into something useful instead of something confusing =)
It turns out my code was creating a solid object as game world, which meant Box2D was trying to perform collision resolution because the "ball" was located inside another solid object.
The solution (based on http://box2d-js.sourceforge.net but with box2dweb API calls) was this:
// setup the world box
var setupWorldBox = function(worldbox) {
var worldAABB = new Box2D.Collision.b2AABB;
worldAABB.lowerBound.Set(0,0);
worldAABB.upperBound.Set(worldbox.width, worldbox.height);
var gravity = new b2Vec2(0, 0);
var doSleep = true;
var world = new b2World(worldAABB, gravity, doSleep);
[....]
}

Categories