01271

Members
  • Content Count

    41
  • Joined

  • Last visited

About 01271

  • Rank
    Advanced Member

Profile Information

  • Gender
    Male

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Well that's embarrassing, since the buttons I have are all at the bottom of the screen then drawing things at 200,200 (I thought it was abs pos) meant that they were completely off the canvas.
  2. It's working: This is the final code: game.battleButton = me.Sprite.extend({ init: function(x, y, params) { var types = { left: "ui/battleLeftmostButton", middle: "ui/battleMiddleButton", right: "ui/battleRightmostButton" }; var s = game.texture.createSpriteFromName(types[params.type]); // var settings = { width: 120, height: 128 }; var settings = { width: s.width, height: s.height, image: game.texture, framewidth: s.width, frameheight: s.height, region: types[params.type], atlasIndices: { [types[params.type]]: 0 }, name: types[params.type], anchorPoint: { x: 0, y: 0 } }; this._super(me.Sprite, 'init', [x, y, settings]); // this.renderable = game.texture.createSpriteFromName(types[params.type]); // this.name = params.title; this.titleLabel = params.title; // this.font = new me.BitmapFont(me.loader.getBinary('verdana'), me.loader.getImage('verdana'),1); this.titleBitmap = new me.BitmapText(this.centerX, this.pos.y + 6, { font: 'verdana', fontData: 'verdana', size: 1, scale: 1, textAlign: 'center', text: this.titleLabel }); // this.titleBitmap.alwaysUpdate = true; // this.titleBitmap.hasLogged = false; // this.font = new me.Font('Palatino', 24, '#333', 'center'); this.test = true; }, draw: function(renderer) { this._super(me.Sprite, 'draw', [renderer]); this.titleBitmap.draw(renderer, this.titleLabel, this.centerX, this.pos.y + 5); if (this.test) { console.log(this.centerX, this.pos.y + 6); this.test = false; } }, // update: function(dt) { // this.body.update(dt); // return (this._super(me.Sprite, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0); // }, }); Tutorials I followed: https://github.com/melonjs/melonJS/wiki/How-to-generate-and-use-Bitmap-Font-in-melonJS (this one is essential for the font) https://www.codeandweb.com/texturepacker/tutorials/using-sprite-sheets-with-melonjs-tutorial (this one is for the sprite's texture only relevant if you're using a texture sheet) Otherwise it looks like drawing a font only works on a sprite and not on an entity which sucks but now I'm out of the woods on this. I solved the problem.
  3. I'm getting close to a solution. I believe the context passed to an entity and a sprite may be different perhaps? I've gotten the text to work now actually by changing my entity to a sprite. This is very strange. I figured out what the black screen problem I had was, the problem was that the game was taking my test player, a black stick figure and stretching it out over the entire screen. This problem is now my current problem and I only need to find out what parameters are necessary to initialize a sprite from a regular constructor with a spritesheet as well so that I can make things work correctly. This is almost working!:
  4. By the way I was using this guide: https://github.com/melonjs/melonJS/wiki/How-to-generate-and-use-Bitmap-Font-in-melonJS to try to make the font work, ideally if there's a solution we'll edit that as well. I do also have a second question which is how to create a sprite and the provide a spritesheet for the image, I did try passing the texture and regions but the result was that it blacked out the entire screen except for a handful of tiles so I reverted back to an entity that gets a renderable added.
  5. When I log the work that's going on inside the draw function of the bitmapText like so: if (glyphWidth !== 0 && glyphHeight !== 0) { // some browser throw an exception when drawing a 0 width or height image if (!this.hasLogged){ console.log(this.fontImage, glyph.x, glyph.y, glyphWidth, glyphHeight, x + glyph.xoffset, y + glyph.yoffset * this.fontScale.y, glyphWidth * this.fontScale.x, glyphHeight * this.fontScale.y); } renderer.drawImage(this.fontImage, glyph.x, glyph.y, glyphWidth, glyphHeight, x + glyph.xoffset, y + glyph.yoffset * this.fontScale.y, glyphWidth * this.fontScale.x, glyphHeight * this.fontScale.y); } // increment position (on line 15804 of the melonjs library) here is the result: <img src="data/font/verdana.png"> 11 93 6 12 209 202 6 12 It should be showing something on the screen but does not for some reason... Inside the image, when I look at it the path works and it seems like nothing is wrong. Esp. since the other way of having the font works.
  6. Attempted changing it from using a direct call to draw to a superclass call and that didn't work either. this.titleBitmap._super(me.BitmapText, 'draw', [renderer, 'test', 200, 200]); sadly does not work...
  7. How are you doing the rotation? Could you share the code for the sprite including the movement code for it? Also are you rotating it with radians instead of degrees?
  8. I have created a BitmapFont. The font works correctly when it's added to the world via addChild. me.game.world.addChild(new me.BitmapText(200,100, { font: me.loader.getImage('verdana'), fontData: me.loader.getBinary('verdana'), size: 1, textAlign: 'center', text: "Test" })); This is what it looks like then: [] However I want to do something that I was able to do in previous versions of MelonJS which is to draw text on top of things. To do so, I created an entity that's going to be a button: game.battleButton = me.Entity.extend({ init: function(x, y, params) { var settings = { width: 120, height: 128 }; this._super(me.Entity, 'init', [x, y, settings]); var types = { left: "ui/battleLeftmostButton", middle: "ui/battleMiddleButton", right: "ui/battleRightmostButton" }; // console.log(types, types[type]); this.renderable = game.texture.createSpriteFromName(types[params.type]); // this.name = params.title; this.titleLabel = params.title; this.titleBitmap = new me.BitmapText(0,0,//this.centerX, this.pos.y + 6, { font: me.loader.getImage('verdana'), fontData: me.loader.getBinary('verdana'), size: 1, textAlign: 'center', text: params.title }); this.test = true; }, draw: function(renderer, rect) { this._super(me.Entity, 'draw', [renderer, rect]); if (this.test){ console.log(renderer); this.test = false; } // this.titleBitmap.draw(renderer); // Draw the title. // draw(renderer, text, x, y) this.titleBitmap.draw(renderer, "Testing", 100, 100); //this.titleBitmap.pos.x, this.titleBitmap.pos.y); }, update: function(dt) { this.body.update(dt); return (this._super(me.Entity, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0); }, onCollision: function(response, other) { return false; } }); The result has no text. What's going on? Version is * melonJS Game Engine - v7.1.1
  9. Oh, learning that turned out to be very helpful. I have a textarea that's beside the game and that's added to the world in the way that parasyte mentioned years ago in a github thread. Since that one is added in a weird way I commented out the part where it's added to the world and started adding my buttons and a lot of enemies and things didn't break. Turns out my problem is with a textarea rather than with buttons or enemies. Go figure :V Now I can focus on just this part. This is what it looks like by the way. game.gui.TextArea = me.Renderable.extend({ init: function() { this.textarea = document.createElement('textarea'); this.textarea.id = 'textHistory'; this.textarea.readOnly = "true"; this.textarea.disabled = "true"; me.video.getWrapper().appendChild(this.textarea); game.TextArea = this; var self = this; var videoPos = me.video.getPos(); self.textarea.style = 'width:' + (window.innerWidth - videoPos.width) + 'px; height:' + videoPos.height + 'px;'; this.isPersistent = true; me.event.subscribe(me.event.WINDOW_ONRESIZE, function() { var videoPos = me.video.getPos(); self.textarea.style = 'width:' + (window.innerWidth - videoPos.width - 10) + 'px; height:' + videoPos.height + 'px;'; }); }, addText: function(text) { this.textarea.innerHTML += '\n' + text; }, clear: function() { this.textarea.innerHTML = ''; }, destroy: function() {}, // update: function() { // videoPos = me.video.getPos(); // this.textarea.style = 'width:' + (window.innerWidth - videoPos.width) + 'px; height:' + videoPos.height + 'px;'; // } }); Shouldn't be hard to get this working. Ultimately it doesn't actually need to be managed by melonjs so I can remove it from the container outright if things get complicated.
  10. I removed some of my entities from the screen and the problem stopped. Then I added more buttons and it started again. It's not the buttons doing it it's some kind of entity limit in general. Dang, that's even more complicated.
  11. No even with code for the buttons that's highly inspired by yours I don't have it working. New button: game.HUD.FSControl = me.GUI_Object.extend({ init: function(x, y, settings) { settings.image = 'buttons'; settings.framewidth = 48; settings.frameheight = 48; settings.width = 480; settings.height = 48; this._super(me.GUI_Object, "init", [x, y, settings]); this.name = 'button2'; this.addAnimation('up', [0]); this.addAnimation('right', [1]); this.addAnimation('down', [2]); this.addAnimation('left', [3]); this.addAnimation('inventory', [6]); this.setCurrentAnimation(settings.buttonID); this.animationpause = true; var buttonRegistry = { up: me.input.KEY.UP, down: me.input.KEY.DOWN, left: me.input.KEY.LEFT, right: me.input.KEY.RIGHT, inventory: me.input.KEY.E, }; this.buttonCode = buttonRegistry[settings.buttonID]; }, update: function() { if (this.updated) { if (!this.released) { me.input.triggerKeyEvent(this.buttonCode, true); } else { me.input.triggerKeyEvent(this.buttonCode, false); } } } }); It's a pretty simple button, 20 lines shorter, but if I have one too many it breaks.
  12. Yeah I noticed I posted exactly at the same time as you, I'll try making it more like yours and see if that works out.
  13. swapping out with GUI_Object has the same error. I'll post the button code now. game.ControlButtonEntity = me.Entity.extend({ init: function(x, y, settings) { settings.image = 'buttons'; settings.width = 48; settings.height = 48; // settings.framewidth = 48; // settings.frameheight = 48; this._super(me.Entity, 'init', [x, y, settings]); this.renderable.addAnimation('up',[0]); this.renderable.addAnimation('right',[1]); this.renderable.addAnimation('down',[2]); this.renderable.addAnimation('left',[3]); this.renderable.addAnimation('A',[4]); this.renderable.addAnimation('B',[5]); this.renderable.addAnimation('inventory',[6]); this.renderable.addAnimation('exitInventory',[7]); this.renderable.addAnimation('C',[8]); this.renderable.addAnimation('D',[9]); this.alwaysUpdate = true; this.body.gravity = 0; this.buttonID = settings.buttonID; this.name = 'button'; this.alwaysUpdate = true; this.body.collisionType = me.collision.types.NO_OBJECT; this.animationpause = true; // this.isPersistent = true; this.pushed = false; this.renderable.setCurrentAnimation(settings.buttonID); me.input.registerPointerEvent('pointerdown', this, this.startButtonPress.bind(this)); me.input.registerPointerEvent('pointerup', this, this.endButtonPress.bind(this)); me.input.registerPointerEvent('pointerleave', this, this.endButtonPress.bind(this)); var buttonRegistry = { up : me.input.KEY.UP, down : me.input.KEY.DOWN, left : me.input.KEY.LEFT, right : me.input.KEY.RIGHT, inventory:me.input.KEY.E, }; this.buttonCode = buttonRegistry[settings.buttonID]; }, startButtonPress: function() { me.input.triggerKeyEvent(this.buttonCode, true); }, endButtonPress: function() { me.input.triggerKeyEvent(this.buttonCode, false); }, update: function(dt) { if (this.pushed) { } // this.body.update(dt); return (this._super(me.Entity, 'update', [dt]) || true); }, }); If I have more than 3 of these on screen at once it breaks the game with the aforementioned error. // Add our HUD to the game world, add it last so that this is on top of the rest. // Can also be forced by specifying a "Infinity" z value to the addChild function. this.HUD = new game.HUD.Container(); me.game.world.addChild(this.HUD); // me.game.world.addChild(me.pool.pull('textbox')); if (!game.hasAddedTextarea) { this.HUD.addChild(new game.gui.TextArea(0, 300, 960, 250)); game.hasAddedTextarea = true; } vpw = me.game.viewport.getBounds().width; vph = me.game.viewport.getBounds().height; // multiples 48 96 144 192 me.game.world.addChild(me.pool.pull('buttonEntity', vpw - 144, vph - 144, { buttonID: 'up' })); me.game.world.addChild(me.pool.pull('buttonEntity', vpw - 96, vph - 96, { buttonID: 'right' })); me.game.world.addChild(me.pool.pull('buttonEntity', vpw - 192, vph - 96, { buttonID: 'left' })); // me.game.world.addChild(me.pool.pull('buttonEntity', vpw - 144, vph - 96, { buttonID: 'down'
  14. When I change the button Entity I made into a sprite and adapt a few things, the problem goes away. However the pointer events no longer work so that's not the best trade.
  15. So I have several buttons for on-screen controls. I can add any combination of three buttons but as soon as I add a fourth one I get the error: TypeError: rect is undefined It's really weird because if I make each button say its bounds from inside I get the following: Object { pos: Object, shapeType: "Rectangle", points: Array[4], edges: Array[4], normals: Array[4], _width: 48, _height: 48 } entities.js:322:5 Object { pos: Object, shapeType: "Rectangle", points: Array[4], edges: Array[4], normals: Array[4], _width: 48, _height: 48 } entities.js:322:5 Object { pos: Object, shapeType: "Rectangle", points: Array[4], edges: Array[4], normals: Array[4], _width: 48, _height: 48 } entities.js:322:5 Object { pos: Object, shapeType: "Rectangle", points: Array[4], edges: Array[4], normals: Array[4], _width: 48, _height: 48 } entities.js:322:5 and the pos is there and it's right. Checking in-game it's right as well, var abc = me.game.world.getChildByName('button')[3] abc.getBounds() Object { pos: Object, shapeType: "Rectangle", points: Array[4], edges: Array[4], normals: Array[4], _width: 48, _height: 48 } pos is 100, 100. Here's the stack trace: TypeError: rect is undefined[Learn More] melonjs.js:8890:13 Quadtree.prototype.getIndex http://localhost:8000/lib/melonjs.js:8890:13 Quadtree.prototype.insert http://localhost:8000/lib/melonjs.js:8993:25 Quadtree.prototype.insertContainer http://localhost:8000/lib/melonjs.js:8949:25 api.update http://localhost:8000/lib/melonjs.js:3814:21 _renderFrame http://localhost:8000/lib/melonjs.js:13807:13 How and why is this happening?