Alexander Farber

Members
  • Content Count

    25
  • Joined

  • Last visited

About Alexander Farber

  • Rank
    Member
  • Birthday 06/08/1972

Contact Methods

  • Website URL
    http://afarber.de
  • Twitter
    farber72

Profile Information

  • Gender
    Male
  • Location
    Bochum
  • Interests
    Linux, PostgreSQL, Jetty
  1. Thank you, Ivan, I did not notice that plugin.
  2. Good evening, I work on a card game with draggable 2D cards. I have attached a screenshot and the source code in a test file of my card game. My question is: Does anybody know, how to achieve a perspective effect for the cards similar to the one you can see on the other attached screenshot (from the game Solitaire)? How to make the cards squished vertically and slightly wider on the bottom? Thank you for any ideas stage-scale-card-shadow.html Card.js Shadow.js
  3. Thanks for you suggestion ozgun, but I didn't want to go through all the children of app.stage and apply some transforms to all of them. At the end I have solved my problem with the attached file. I have also posted my answer at Stackoverflow: https://stackoverflow.com/a/64528244/165071 test-pixi-stage-scale-bunny.html
  4. Hello and good evening! I am trying to develop a board game and would like to: Use HTML elements like buttons etc. Give Pixi.js max possible space and fit + center-align the game board inside the canvas element Ivan had suggested to scale the stage and the children will be scaled automatically. I have tried it in the attached file (and here is a jsfiddle), but just cannot figure out the math for scaling. Also, my dragging code breaks. Regards Alex test-pixi-stage-scale.html
  5. A follow-up for my question - if all you need is a radial background for your pixi.js canvas, then it is doable via CSS and here you will find my code for jQuery UI color picker for changing the color.
  6. Thank you, Ivan - transparent: true has helped in my case:
  7. Ivan, thank you for replying, but what do you mean by "bounds are AABB"?
  8. Good evening, with pixi.js 5.2.1 (and I am using pixi-legacy too) what is please the approach to have a radial background below the canvas or maybe drawn on it? I have searched for suggestions, but they are few years old. I have tried CSS-styling the canvas element with: #myCanvas { background: radial-gradient(#e66465, #9198e5); border: 4px dotted red; } And commented the backgroundColor in the Javascript code (in the hope it would become transparent): var app = new PIXI.Application({ width: 1000, height: 500, view: document.getElementById('myCanvas'), // backgroundColor: 0xFFFFFF, antialias: true }); but only the border was showing some of the gradient - please see the screenshot attached. Thank you Alex
  9. Good evening, I have several playing cards at the table (screenshot below) and am trying to identify the card which is being clicked - by the following code: function onDragStart(ev) { var stagePoint = ev.data.getLocalPosition(app.stage); for (var i = 0; i < app.stage.children.length; i++) { var child = app.stage.children[i]; if (child instanceof Card && child.getBounds().contains(stagePoint.x, stagePoint.y)) { draggedCard = child; if (draggedCard.getBounds().contains(stagePoint.x, stagePoint.y)) { this.data = ev.data; draggedCard.moveBy(-Shadow.OFFSET, -Shadow.OFFSET); shadow.visible = true; oldX = stagePoint.x; oldY = stagePoint.y; } } } } But the approach does not work, the sprites seem not to be sorted by the order I have called app.stage.addChild() How to proceed here best? Please recommend some approach. I would like to select the card for dragging and also change its z-order to be on the top. I am using pixi.js 5.2.1, here is my web page and the screenshot below - Thank you
  10. Hello, I have a Sprite loading a playing card texture from sprite sheet. Now I am trying to add a shadow to the card (when dragged) by just drawing a rectangle on the same sprite - function Card(str) { PIXI.Sprite.call(this, PIXI.Texture.from(str)); this.shadow = new PIXI.Graphics(); this.shadow.beginFill(Card.SHADOW_ALPHA, .5); this.shadow.drawRoundedRect(0, 0, Card.WIDTH, Card.HEIGHT, Card.CORNER); this.shadow.endFill(); this.shadow.x = Card.SHADOW_OFFSET - Card.WIDTH / 2; this.shadow.y = Card.SHADOW_OFFSET - Card.HEIGHT / 2; this.addChild(this.shadow); // HOW TO MOVE UNDERNEATH THE TEXTURE? this.anchor.set(.5); this.interactive = false; this.buttonMode = true; this.visible = true; } Card.prototype = Object.create(PIXI.Sprite.prototype); Card.prototype.constructor = Card; Card.WIDTH = 254; Card.HEIGHT = 400; Card.SHADOW_OFFSET = 24; Card.SHADOW_COLOR = 0x000000; Card.CORNER = 8; Card.prototype.move = function(x, y) { this.x = x; this.y = y; } Card.prototype.moveBy = function(dX, dY) { console.log('moveBy: dX=' + dX + ', dY=' + dY); this.x += dX; this.y += dY; } However the shadow rect is displayed above the texture - while I would like it to be drawn beneath it - Is there please a way to move the shadow one layer down? And my 2nd problem is rotation: when I rotate the card Sprite, I would like the shadow to be displayed south-east of it instead of just rotating around the card. What would you recommend here please? My target is displaying a shadow underneath the card being dragged by the user, to add some (poor man's) depth. I have tried using DropShadowFilter(), but didn't like how it looked (pixelated / dithered). Greetings from Germany Alex
  11. I have got it resolved and of course it was a silly mistake by me - when I use the following it works: <script type="text/javascript" src="//cdn.jsdelivr.net/npm/pixi-filters@3.1.1/dist/pixi-filters.js"></script> I am not sure what was meant by the ".cjs" in the previously used URL Thank you
  12. Hello and good evening, I am trying to use DropShadowFilter at a web page (please scroll down): <script type="text/javascript" src="//cdn.jsdelivr.net/npm/pixi.js@5.2.1/dist/pixi.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/pixi.js-legacy@5.2.1/dist/pixi-legacy.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/pixi-filters@3.1.1/lib/pixi-filters.cjs.min.js"></script> When I use blur filter, it just works, but drop shadow not - //var blurFilter = new PIXI.filters.BlurFilter(); var shadowFilter = new PIXI.filters.DropShadowFilter(); shadowFilter.color = 0x000020; shadowFilter.alpha = 0.2; shadowFilter.blur = 6; shadowFilter.distance = 20; function onDragStart(ev) { var stagePoint = ev.data.getLocalPosition(app.stage); if (card.getBounds().contains(stagePoint.x, stagePoint.y)) { oldX = stagePoint.x; oldY = stagePoint.y; this.data = ev.data; card.filters = [ shadowFilter ]; } } function onDragEnd() { oldX = 0; oldY = 0; card.filters = []; } The erorr message in macOS Safari is (screenshot attached): [Error] ReferenceError: Can't find variable: exports Global Code (pixi-filters.cjs.min.js:7) [Error] SyntaxError: Unexpected string literal 'DropShadowFilter'. import call expects exactly one argument. (anonymous function) (raspasy:122) Does anybody please have a hint for me? Greetings from Germany Alex
  13. Good evening, with pixi.js v3 I was using the following code to draw a shadow underneath a polygon (here full source code of Score.js): this.filters = [ new PIXI.filters.DropShadowFilter() ]; this.filters[0].alpha = .2; But with pixi.js v4 I can not use that filter anymore. Here are the two polygons I need to draw, blue and red: Instead of using drop shadow filer, I would like to draw the same polygon in translucent gray, offset by few pixels. Could someone please help me, how to offset the polygon, I can not find anything in the pixi js docs. Here my current code: Score.POLY_1 = [ new PIXI.Point(0, 0), new PIXI.Point(Score.WIDTH + 2, 0), new PIXI.Point(Score.WIDTH - 2, Score.HEIGHT / 2), new PIXI.Point(Score.WIDTH + 2, Score.HEIGHT), new PIXI.Point(0, Score.HEIGHT) ]; // How to draw grey POLY_1 offset by few pixels here? this.bgGraphics.clear(); this.bgGraphics.beginFill(this.color, 1); this.bgGraphics.drawPolygon(Score.POLY_1); this.bgGraphics.endFill(); Regards Alex
  14. Good afternoon, in a word game I am trying to draw score as white numbers above a blue (or red) rectangle: In the above screenshot it is the number "13". Here is my entire class Score.js (with currently hardcoded WIDTH and HEIGHT): "use strict"; function Score(color) { PIXI.Container.call(this); this.interactive = false; this.buttonMode = false; this.visible = false; this.bgGraphics = new PIXI.Graphics(); this.bgGraphics.beginFill(color, 1); this.bgGraphics.drawRect(0, 0, Score.WIDTH, Score.HEIGHT); this.bgGraphics.endFill(); this.addChild(this.bgGraphics); this.text = new PIXI.Text('XXX', {font: '20px Arial', fill: 0xFFFFFF}); this.text.x = 1; this.text.y = 1; this.addChild(this.text); } Score.prototype = Object.create(PIXI.Container.prototype); Score.prototype.constructor = Score; Score.WIDTH = 36; Score.HEIGHT = 24; Score.prototype.setText = function(str) { this.text.text = str; } I wonder, how to modify my setText function, so that a new rectangle is drawn on each call - as a bounding rectangle for the str string? I have looked at the PIXI.Text.getBounds() method, but it returns a Matrix and not a Rectangle... Regards Alex
  15. Fatalist, but I would like to use WebGL (when available) for better framerates (even though my game is very simple). So I think, I can not use Canvas drawing methods, or can I?