Hi I'm trying to make a basic lightning system using bitmap multiply in PhaserJS. How ever I'm having trouble with the fact that the bitmap does not darken my sprites. How would I achieve this?
I create the bitmap like so in the games create function.
// Shadow
this.bitmap = this.game.add.bitmapData(
this.game.width+100,
this.game.height+100
);
this.lightBitmap = this.game.add.image(0, 0, this.bitmap);
this.lightBitmap.blendMode = Phaser.blendModes.MULTIPLY;
I then fill it and paint it every frame in the update function.
this.bitmap.fill(20, 20, 20, 1);
this.lightBitmap.x = this.camera.x-50;
this.lightBitmap.y = this.camera.y-50;
this.bitmap.dirty = true;
Here is an image that shows what happens. I painted the shadow on half screen only to illustrate that it does not darken the sprites. The dirt tiles and the purple player are the sprites I want it to affect.
How can I make it darken the sprites as well?
That's probably because of the order you are adding your images. You should add the shadow as the last one if you want to affect to all your elements. Or you can always use bringToTop method.
Take a look at this example:
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game');
var mainState = {
preload:function(){
var dataURI = 'data:image/png;base64,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'
var data = new Image();
data.src = dataURI;
game.cache.addImage('car', dataURI, data);
var dataURI2 = 'data:image/png;base64,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';
var data2 = new Image();
data2.src = dataURI2;
game.cache.addImage('wood', dataURI2, data2);
},
create:function(){
game.stage.backgroundColor = "#4488AA";
this.bitmap = game.add.bitmapData(
200,
200
);
this.lightBitmap = game.add.image(0, 0, this.bitmap);
this.lightBitmap.blendMode = Phaser.blendModes.MULTIPLY;
game.physics.startSystem(Phaser.Physics.ARCADE);
this.car =this.game.add.sprite(game.world.centerX,game.world.centerY,'car');
this.car.anchor.setTo(0.5,0.5);
game.physics.arcade.enable(this.car);
game.physics.arcade.enable(this.car);
platforms = game.add.group();
platforms.enableBody = true;
var ground = platforms.create(100,100, 'wood');
var ground2 = platforms.create(400,400, 'wood');
ground.body.immovable = true;
ground2.body.immovable = true;
},
update:function(){
this.car.body.velocity.x =0;
this.car.body.velocity.y = 0;
if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT)){
this.car.body.velocity.x = -100;
}
if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){
this.car.body.velocity.x = 100;
}
if(game.input.keyboard.isDown(Phaser.Keyboard.UP)){
this.car.body.velocity.y = -100;
}
if(game.input.keyboard.isDown(Phaser.Keyboard.DOWN)){
this.car.body.velocity.y = 100;
}
this.bitmap.fill(50, 50, 50, 1);
this.lightBitmap.x = this.car.body.x-50;
this.lightBitmap.y = this.car.body.y-50;
this.bitmap.dirty = true;
game.world.bringToTop(this.lightBitmap);
},
};
game.state.add('main', mainState);
game.state.start('main');
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.min.js"></script>
<div id="game"></div>
Related
I just started using Canvas for my web game project and faced a problem.
I'm using this code to render the game:
function render(f){
if(charoffset.x == null) charoffset.x = charpos.x*tilescale;
if(charoffset.y == null) charoffset.y = charpos.y*tilescale;
if(!tiles) tiles = [];
if(f){
log("Welcome.","gold");
}
var canPassthrough = function (){
if ((def.passable(this.type))&&(typeof this.type !== 'undefined')){
return true;
}
else {
return false;
}
};
if(!f) lighting.update();
canvas.getContext("2d").clearRect(0,0,sq,sq);
for (var i = 0; i < map[charlvl].length; i++){
if(!tiles[i]) tiles[i] = [];
for (var j = 0; j < map[charlvl][i].length; j++){
if(!tiles[i][j]) tiles[i][j] = placetile(i,j);
drawtile(tiles[i][j]);
placeitem(i,j);
}
}
ui.overlay.text("casting shadows...");
//shadowcaster(20);
var tex = document.createElement("img");
tex.src = "../img/charplaceholder.png";
var hero = canvas.getContext("2d");
hero.globalAlpha = 1.0;
if(charoffset.x>=map_scroll.x&&charoffset.y*tilescale>=map_scroll.y){
var pos = {
x: charoffset.x - map_scroll.x - tilescale,
y: charoffset.y - map_scroll.y - tilescale
};
hero.drawImage(tex,pos.x,pos.y,tilescale,tilescale);
}
function placetile(x,y){
var obj = {};
obj.type = map[charlvl][x][y].id;
obj.canPassthrough = canPassthrough;
obj.state = {explored: false, lit: false};
obj.coords = {x:x,y:y};
obj.offset = {x:x*tilescale,y:y*tilescale};
return obj;
}
function drawtile(t){
if(t.offset.x>=map_scroll.x&&t.offset.y>=map_scroll.y){
var pos = {
x: t.offset.x - map_scroll.x - tilescale,
y: t.offset.y - map_scroll.y - tilescale
};
if(!t.state.explored&&!t.state.lit){
return false;
}
else if(t.state.lit&&t.state.explored){
var tex = document.createElement("img");
var tile = canvas.getContext("2d");
tex.src = def.css.tile(t.type);
tile.globalAlpha = 1.0;
tile.drawImage(tex,pos.x,pos.y,tilescale,tilescale);
return true;
}
else if(t.state.explored&&!t.state.lit){
var tex = document.createElement("img");
var tile = canvas.getContext("2d");
tex.src = def.css.tile(t.type);
tile.globalAlpha = 0.25;
tile.drawImage(tex,pos.x,pos.y,tilescale,tilescale);
return true;
}
}
}
function placeitem(x,y){
return;
if (loot[charlvl][x][y]){
for(var i=0;i<loot[charlvl][x][y].length;i++){
var tile = document.createElement("div");
var tileid = loot[charlvl][x][y][i].type;
tile.className = def.css.item(tileid);
tile.coords = {x:x,y:y};
document.getElementById("x" + x + "y" + y).appendChild(tile);
}
}
}
if(f){
camera.center(charpos.x,charpos.y);
ui.overlay.text("loading the dungeon...");
ui.overlay.hide();
}
}
Function render() is fired by various events, such as character moving, map dragging, lighting update, etc.
This is the result:
I would like to add inset shadows to walls so it's more clearly visible those are walls. I tried experimenting with canvas context shadows, and used this:
It's supposed to draw a transparent rectangle and a shadow for it at 100, 100 with size 20, 20, however this applies shadow to every drawn tile instead.
I feel like I'm using drawing wrong. Can anyone explain how to effectively
use canvas to achieve desired effect?
Do not use the 2D API shadow options , they are very very slow ( and that is an understatement of how bad they are). You are much better off creating the shadows as part of the tile set and rendering them with either ctx.globalAlpha set to less than 1 and/or use one of the many composite modes. Eg ctx.globalCompositeOperation = "multiply"; Or overlay, color-burn, hard-light, and soft-light. You can even use a combination to get a very good shadow effect.
Creating the shadows as part of the tile set will give a much more realistic effect as the shadow API is just for shadows cast from flat object floating above a flat surface, not for 3D objects protruding from the screen that may have sloped sides in the z direction.
If you do not wish to create the shadows as part of the tile set consider creating the shadow tile set at onload using an off screen canvas via the shadow API options. Then render from that to the canvas using alpha and composite options
I am developing a canvas paint but I want to have an eraser there. So I use this lines to erase de content but when I click is clear the whole canvas.
//undo tool
var undo = new createjs.Bitmap(app.loader.getResult('undo'));
undo.name = 'undo';
undo.x = brush.x + 90;
undo.y = brush.y;
undo.addEventListener('click', this.undoHandler);
this.toolsContainer.addChild(undo);
//trash tool
var clear = new createjs.Bitmap(app.loader.getResult('clear'));
clear.name = 'clear';
clear.x = undo.x + 90;
clear.y = undo.y;
clear.addEventListener('click', this.clearHandler);
this.toolsContainer.addChild(clear);
undoHandler:function(){
if(tools.undoArray.length){
var lastItem = tools.undoArray.pop();
app.container.removeChild(lastItem);
var lastItem2 = tools.undoArray2.pop();
app.container.removeChild(lastItem2);
var lastItem3 = tools.undoArray3.pop();
app.container.removeChild(lastItem3);
app.stage.update();
}
},
clearHandler:function(){
app.container.removeAllChildren();
app.container.updateCache(clearhandler?"destination-out":"source-over");;
app.stage.update();
},
I trying to develop something like this erase
http://jsfiddle.net/lannymcnie/ZNYPD/
any idea?
well here http://jsfiddle.net/lannymcnie/ZNYPD/, the key is this:
wrapper.updateCache(erase?"destination-out":"source-over");
so...
var stage, wrapper,erase;
function init() {
var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", stage);
// Add some text to draw on top of (also instructions)
stage.addChild(new createjs.Text("Click and Drag to Draw", "40px Arial", "#000000").set({x:200,y:200}));
// Set up the container. We use it to draw in, and also to get mouse events.
var wrapper = new createjs.Container();
wrapper.hitArea = new createjs.Shape(new createjs.Graphics().f("#000").dr(0,0,800,600));
wrapper.cache(0,0,800,600); // Cache it.
stage.addChild(wrapper);
// Create the shape to draw into
var drawing = new createjs.Shape();
wrapper.addChild(drawing);
var lastPoint = new createjs.Point();
wrapper.addEventListener("mousedown", function(event) {
// Store the position. We have to do this because we clear the graphics later.
lastPoint.x = event.stageX;
lastPoint.y = event.stageY;
erase = Math.floor(Math.random()*2);
wrapper.addEventListener("pressmove", function(event){
// Draw a round line from the last position to the current one.
drawing.graphics.ss(20, "round").s("#ff0000");
drawing.graphics.mt(lastPoint.x, lastPoint.y);
drawing.graphics.lt(event.stageX, event.stageY);
// Update the last position for next move.
lastPoint.x = event.stageX;
lastPoint.y = event.stageY;
// Draw onto the canvas, and then update the container cache.
wrapper.updateCache(erase==1?"destination-out":"source-over");
drawing.graphics.clear();
});
// Listen for mousemove
});
}
$(function(){
init();
})
the only difference is that the drawing is based on a random from 0 to 1 because in my example the erase gets these values from here erase = Math.floor(Math.random()*2);
I have achieved this by maintaining a array of mid points and using the globalCompositeOperation as destination-out and source-over to make a transparent eraser trail .
Following is the code that you need to use with a mouse move function
`var handleMouseMove = function (event) {
midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);
if(curTool.type=="eraser"){
var tempcanvas = document.getElementById('drawcanvas');
var tempctx=tempcanvas.getContext("2d");
tempctx.beginPath();
tempctx.globalCompositeOperation = "destination-out";
tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);
tempctx.fill();
tempctx.closePath();
tempctx.globalCompositeOperation = "source-over";
drawingCanvas.graphics.clear();
// keep updating the array for points
arrMidPtx.push(midPt.x);
arrMidPty.push(midPt.y);
stage.addChild(drawingCanvas);
stage.update();
}
else if ( curTool.type=="pen"){
drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
arrMidPtx.push(midPt.x);
arrMidPty.push(midPt.y);
arrOldPtx.push(oldPt.x);
arrOldPty.push(oldPt.y);
arrOldMidPtx.push(oldMidPt.x);
arrOldMidPty.push(oldMidPt.y);
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
stage.addChild(drawingCanvas);
stage.update();
}
};`
i'm only began to learn Javascript, so i have some troubles with animation in EaselJs. I'm trying to move object on mouse click (that's ok as i've expected), but when i'm try to add animation of movement in proper way, my animation doesn't acts, just stops at one frame when object moves. Here's the code of main.js and example of problem: http://rustem.ucoz.com/onMouseRun/index.html
var canvas;
var stage;
var imgCharRun = new Image();
var imgCharIdle = new Image();
var bmpAnimation;
var canvasx;
var isClicked = false;
function init() {
canvas = document.getElementById('canvas');
canvasx = canvas.offsetLeft;
imgCharRun.src = "monsterRun.png";
imgCharIdle.src = "monsterIdle.png";
startGame();
}
function startGame(){
stage = new createjs.Stage(canvas);
stage.enableMouseOver(10);
var spriteSheet = new createjs.SpriteSheet({
images: [imgCharRun, imgCharIdle],
frames: {width: 64, height: 64, regX: 32, regY: 32},
animations: {
walk: [0, 9, "walk"],
idle: [10, 20, "idle"]
}
});
bmpAnimation = new createjs.BitmapAnimation(spriteSheet);
bmpAnimation.gotoAndPlay ("idle");
bmpAnimation.scaleX = 1;
bmpAnimation.x = canvas.width/2;
bmpAnimation.y = canvas.height-100;
bmpAnimation.currentFrame = 9;
stage.addChild(bmpAnimation);
createjs.Ticker.addListener(window);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(30);
}
document.onmousedown = function(e) {
isClicked = true;
window.mousex = e.clientX-canvasx;
}
function isMouseClicked() {
if (isClicked){
moveToMouse();
}
}
function moveToMouse() {
if(bmpAnimation.x<mousex) {
bmpAnimation.x+=5;
bmpAnimation.gotoAndPlay("walk");
bmpAnimation.scaleX = -1;
}
if(bmpAnimation.x>mousex) {
bmpAnimation.x-=5;
bmpAnimation.gotoAndPlay("walk");
bmpAnimation.scaleX = 1;
}
}
function tick() {
stage.update();
isMouseClicked();
}
Please, help me with this problem:
You are calling gotoAndPlay("walk") every frame while the mouse is down, so it constantly sets the animation to the first frame of the walk animation. You need a flag to indicate if the animation is running already, and ensure you only call it one time.
Problem is solved, thanks. Here is what i wanted: http://rockfor.us/onMouseRun/index.html
its very confused i`m designing a 2d game and i use this code to draw images to canvas the alert method return background.x = 0 ! but when i change x to z or any letter its return the number 400 i ! why background.x always equal to zero ???
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
function loadResources(){
background = new Image();
background.src = "11.jpg";
background.width = 128;
background.height = 128;
background.x = 400;
background.y = 450;
}
function drawimage(){
alert(background.x);
context.drawImage(background,background.x,background.y,background.width,background.height);
}
function gameLoop() {
drawimage();
}
loadResources();
setInterval(gameLoop, 1000/60);
Unlike other objects, you are actually not able to set properties of an Image object that do not belong to it. As you've seen, when you try to access them after setting them, the properties will not be available. You can slightly rework your code as follows to get the behavior you're looking for:
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var resources = {};
function loadResources(){
resources.background = new Image();
resources.background.src = "11.jpg";
resources.background.width = 128;
resources.background.height = 128;
resources.backgroundx = 400;
resources.backgroundy = 450;
}
function drawimage(){
console.log(resources.backgroundx);
context.drawImage(resources.background,resources.backgroundx,resources.backgroundy,resources.background.width,resources.background.height);
}
function gameLoop() {
drawimage();
}
loadResources();
setInterval(gameLoop, 1000/60);
I start on KineticJS (and on Canvas) and i'm creating a small game for learn...
Right now, I have just 2 layers :
First with a map composed by Kinetic.Image
Second with the last time who game as draw.
I want refresh display X time per second but after 20 or 30 times the game are really slow.. And it's the same when I flood event click ( who launch the draw function too)...
Moreover, i can see in the second layer : the old text are never clean, the new are added on top... :/
var stage;
var layers = {};
var CANEVAS_WIDTH = 800;
var CANEVAS_HEIGHT = 600;
var MAP_WIDTH = 10;
var MAP_HEIGHT = 10;
var MAPPING_WIDTH = 150;
var MAPPING_HEIGHT = 88;
var LEFT_X = 0;
var LEFT_Y = MAP_WIDTH*MAPPING_HEIGHT/2;
var TOP_X = MAP_WIDTH/2*MAPPING_WIDTH;
var TOP_Y = 0;
var VIEW_X = 0;
var VIEW_Y = 0;
var CURSOR_X = 6;
var CURSOR_Y = 0;
var images = {};
function loadImages(sources, callback)
{
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources)
numImages++;
for (var src in sources)
{
images[src] = new Image();
images[src].onload = function(){
if (++loadedImages >= numImages)
callback();
};
images[src].src = sources[src];
}
}
function getMouseInfo(mousePos)
{
var info = {screen_x : mousePos.x,
screen_y : mousePos.y,
mouse_x : mousePos.x+VIEW_X,
mouse_y : mousePos.y+VIEW_Y-LEFT_Y,
onMap : 0,
map_x : -1,
map_y : -1};
map_x = -(info.mouse_y - ((LEFT_Y * info.mouse_x) / TOP_X)) / MAPPING_HEIGHT;
map_y = -(-info.mouse_y - ((LEFT_Y * info.mouse_x) / TOP_X)) / MAPPING_HEIGHT;
if(map_x >= 0 && map_x < MAP_WIDTH && map_y >= 0 && map_y < MAP_HEIGHT)
{
info.map_y = parseInt(map_y);
info.map_x = parseInt(map_x);
info.onMap = 1;
}
return info;
}
function draw()
{
drawMap();
drawFPS();
stage.add(layers.mapLayer);
stage.add(layers.fpsLayer);
}
function drawFPS()
{
layers.fpsLayer.clear();
var fps = new Kinetic.Shape(function(){
var date = new Date();
var time = date.getTime();
var context = this.getContext();
context.beginPath();
context.font = "12pt Calibri";
context.fillStyle = "red";
context.fillText("FPS : "+time, 10, 20);
});
layers.fpsLayer.add(fps);
}
function drawMap()
{
var x=0,y=0;
layers.mapLayer.clear();
var s = new Kinetic.Shape(function(){
var context = this.getContext();
context.beginPath();
context.rect(0, 0, CANEVAS_WIDTH, CANEVAS_HEIGHT);
context.fillStyle = "#000";
context.fill();
context.closePath();
});
layers.mapLayer.add(s);
for(x=0; x<MAP_WIDTH; x++)
for(y=0;y<MAP_HEIGHT; y++)
{
var img = new Kinetic.Image({
image: ((x==CURSOR_X && y==CURSOR_Y)?images.testMapCursor:images.testMap)
});
img.x = x*MAPPING_WIDTH/2 + y*MAPPING_WIDTH/2 - VIEW_X;
img.y = (MAP_WIDTH-1)*MAPPING_HEIGHT/2 - x*MAPPING_HEIGHT/2 + y*MAPPING_HEIGHT/2 - VIEW_Y;
layers.mapLayer.add(img);
}
}
function changeCursorPosition(cursor_x, cursor_y)
{
CURSOR_X = cursor_x;
CURSOR_Y = cursor_y;
draw();
}
function initStage()
{
layers.mapLayer = new Kinetic.Layer();
layers.fpsLayer = new Kinetic.Layer();
draw();
}
/*
* INIT
*/
window.onload = function(){
stage = new Kinetic.Stage("container", <?=CANEVAS_WIDTH;?>, <?=CANEVAS_HEIGHT;?>);
stage.on("mousemove", function(){
var mouseInfo = getMouseInfo(stage.getMousePosition());
if(mouseInfo.onMap)
document.body.style.cursor = "pointer";
else
document.body.style.cursor = "default";
});
stage.on("mousedown", function(){
var mouseInfo = getMouseInfo(stage.getMousePosition());
if(mouseInfo.onMap)
changeCursorPosition(mouseInfo.map_x, mouseInfo.map_y);
});
var sources = {
testMap : "testMap.png",
testMapCursor : "testMapCursor.png"
};
loadImages(sources, initStage);
};
Sorry, my english are realy bad.
Thank all.
I know someone who is trying out KineticJS. I haven't used it myself, so I apologize that I cannot provide more specific help.
Unfortunately, it is very difficult to get good performance with canvas, and it depends greatly on the browser. Last I checked, Opera 12 and IE 9 performed significantly faster than other browsers, since their 2D rendering is 3D accelerated (using OpenGL and Direct3D, respectively)
I am not sure if this applies to KineticJS, but one technique you can use to improve performance with canvas is to use multiple canvas elements, and transform their positions rather than blitting on a single surface.
I've been pretty happy with the results I've gotten using Jeash, which is wired into NME's command-line tools. The development is similar to working with Flash, but it will create an HTML5 Canvas application using your code. The same application will also be able to publish to Windows, Mac, Linux, iOS, Android, webOS and Flash, as either native C++ and OpenGL, or as SWF bytecode. This gives you a lot of options for providing the best experience for each user.
http://www.haxenme.org