notalentgeek

Members
  • Content Count

    54
  • Joined

  • Last visited

1 Follower

About notalentgeek

  • Rank
    Advanced Member
  • Birthday 01/29/1993

Profile Information

  • Gender
    Male
  • Location
    Enschede
  • Interests
    I want to make a small story based game studio.

Contact Methods

  • Twitter
    notalentgeek

Recent Profile Visitors

1181 profile views
  1. These codes below: const bunnyTexture = new Texture.from('bunny.png'); const bunnySprite = new Sprite(bunnyTexture); And these codes below: const bunnySprite = Sprite.from('bunny.png'); Both codes seem do the same thing.... What are the differences? What is the best practice? Are the one is better than the other one on certain cases, etc..
  2. Alright guys... thank you for your reply. So: Browser DevTools (I think, I am quite familiar with this) Use TypeScript Sugar Classes (not sure what it is meant, but I will learn along the way) Using const (are there any cases we would still use var?) Possibility of using WebPack ---> Is this necessary (help my development workflow by significant margin)?
  3. I am looking at this codes: https://codepen.io/davidhartley/pen/zpuwC. I want to have clouds like that in my PixiJS application. But, I need reference on how to get started. For starter, how I can make an extremely simple version of the cloud? I want to make an extremely simple version of this and step-up from there. What is this function used for: var shader = new PIXI.AbstractFilter(fragmentSrc, uniforms); ? And what makes PixiJS able to make 3D render? I though it is only meant for 2D development.
  4. Hello guys, it has been long time since I visit this forum actually. Just right to the point, I want to get started again with PixiJS and general JavaScript development (last time, it was like three years ago with PhaserJS). I just done reading all chapters in https://github.com/kittykatattack/learningPixi. I just made a simple circular gradiented white circle that has its alpha decrease and increase over time. Here are the codes: // Aliases let Application = PIXI.Application let Graphics = PIXI.Graphics let Loader = PIXI.Loader // Instantiating PixiJS Web Application let app = new Application({ width: 640, height: 480, antialias: true, }); // Instantiating PixiJS Loader let loader = new Loader(); // Attaching the `<canvas>` as the latest element in the `<body>` document.body.appendChild(app.view); let state; let simpleCloud, simpleCloudAlphaRes; // Once the assets are loaded (we don't have any assets for this application), run the `setup()` function. loader.load(setup); function setup() { let canvas = document.createElement('canvas'); canvas.width = 150; canvas.height = 150; let ctx = canvas.getContext('2d'); let x = 75, y = 75, // Radius of the white glow innerRadius = 1, outerRadius = 75, // Radius of the entire circle radius = 75; let gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius); gradient.addColorStop(0, "#FFFFFF66"); gradient.addColorStop(1, "#FFFFFF00"); ctx.arc(x, y, radius, 0, 2 * Math.PI); ctx.fillStyle = gradient; ctx.fill(); simpleCloud = new PIXI.Sprite(PIXI.Texture.from(canvas)); simpleCloud.x = app.renderer.width/2; simpleCloud.y = app.renderer.height/2; simpleCloud.anchor.set(0.5, 0.5); app.stage.addChild(simpleCloud); state = main; // Run the PixiJS Application app.ticker.add(delta => state(delta)); } function loop(delta) { state(); } function main(delta) { if (simpleCloud.alpha >= 1) { simpleCloudAlphaRes = -0.005 } else if (simpleCloud.alpha <= 0) { simpleCloudAlphaRes = 0.005 } console.log("simpleCloud.alpha: " + simpleCloud.alpha); simpleCloud.alpha += simpleCloudAlphaRes; } Here is the HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Web Application</title> <meta name="description" content="Web Application"> <meta name="author" content="notalentgeek"> </head> <body> <script src="pixi.js"></script> <script src="20191226_app.js"></script> </body> </html> I work daily as a Go and Python developer. As I just started with PixiJS and JavaScript seems really odd to me, if you look at glance, at my codes above, what could be done better? Additionally, how would you structurize your PixiJS folder? What other framework I should use to complement PixiJS (TypeScript, Babel, PixiJS + ReactJS, etc.)? What are recommended VS Code extensions for JavaScript and PixiJS development? In the end, I want to know the best practice and recommendation when developing JavaScript and PixiJS web application. I hope this is not too much... thank you so much.
  5. I found a weird behavior.... dragon_character.play(true); // `true` is used for looping forever. dragon_character.scale.set(1); console.log("=========="); console.log("after setting up scale and before setting up width and height"); console.log("scale.x = " + dragon_character.scale.x); // `1`, which is expected. console.log("scale.y = " + dragon_character.scale.y); // `1`, which is expected. console.log("height = " + dragon_character.height); // `undefined`, which is expected. console.log("width = " + dragon_character.width); // `undefined`, which is expected. console.log("=========="); dragon_character.height = dragon_character.scale.y*100; dragon_character.width = dragon_character.scale.x*100; console.log("=========="); console.log("after setting up scale and after setting up width and height"); console.log("scale.x = " + dragon_character.scale.x); // `0`, which is NOT expected. console.log("scale.y = " + dragon_character.scale.y); // `4.138100158128295`, which is NOT expected. console.log("height = " + dragon_character.height); // `100`, which is expected. console.log("width = " + dragon_character.width); // `0`, which is expected, if the `scale.x` is indeed `0`. console.log("=========="); dragon_characters.push_with_limit(dragon_character); Here is my full codes: https://pastebin.com/fk5ZZ5e8.
  6. Yea, I just figure it out myself. But this does not explain why `Uncaught TypeError: PIXI.Point is not a constructor` error happened. Neither, there is no information in the documentation. Is there any JavaScript file that I should never import to the HTML file?
  7. I am currently learning Phaser by doing some examples. I am currently here: https://phaser.io/examples/v2/animation/creature-dragon-multiple. I am wondering, how can I set the height and width of `Phaser.Creature` object? The default `height` and `width` are set to undefined. Hence I need to set both height and width in order to set the `Phaser.Creature` dimension. Here are some codes. dragon_character.play(true); // `true` is used for looping forever. dragon_character.scale.set(20); dragon_character.height = 100; dragon_character.width = 100; console.log(dragon_character.height); // 100. console.log(dragon_character.width); // 100. Here are another codes. dragon_character.play(true); // `true` is used for looping forever. dragon_character.scale.set(20); dragon_character.height = 100; console.log(dragon_character.height); // 100. console.log(dragon_character.width); // Undefined. // Additionally the animation does not show up in the screen. If I only set either height or width, the `Phaser.Creature` will not show up in the screen. I don't know if there is no way to set height and let the width adjusted proportionally (vice-versa). Additionally, I could not found a way to get the height and width properties if the dimension is set with `Phaser.Creature.scale.set(25)`. To sum up, my questions: Is there any way to set either height or width and let the un-set properties to adjust in proportion? How can I know the `Phaser.Creature` height and width if it is set with `Phaser.Creature.scale.set()`?
  8. Finally, a respond. I have downloaded twice the library from `npm` the error still persists.
  9. Doing the multiple dragon example here: https://phaser.io/examples/v2/animation/creature-dragon-multiple. Is there anyway so that both dragon appear at the same time, but each starts its animation on different frame?
  10. I am currently learning Phaser by doing examples. Got into the dragon creature example, I need to import additional add-ons for Phaser. I tried to import these JavaScript files. <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-minimum.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-no-physics.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-split.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/pixi.js"></script> These files are irrelevant for the dragon example. But, interesting error happened, `... is not a constructor`. For example `pixi.js:76 Uncaught TypeError: PIXI.Point is not a constructor`. The error happened when I imported the JavaScript file, even without any other JavaScript codes written. Why is that so? Can some explain what this error meant to me? And why the error happens by importing the JavaScript files? Example of the error. Uncaught TypeError: PIXI.Point is not a constructor at Phaser.Stage.PIXI.DisplayObject (pixi.js:76) at Phaser.Stage.PIXI.DisplayObjectContainer (pixi.js:904) at new Phaser.Stage (phaser-split.js:9193) at Phaser.Game.boot (phaser-split.js:13780) at Phaser.Device._readyCheck (phaser-split.js:40872)
  11. Solved. From the most recent Phaser version, I need to import these .js files. <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/phaser.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/creature.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/p2.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-arcade-physics.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-creature.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/src/animation/creature/CreatureMeshBone.js"></script> Hence, I think the documentation here: https://photonstorm.github.io/phaser-ce/Phaser.Creature.html is not valid anymore. It says that I need to compile my own version of Phaser with `Creature` included. Whereas `Creature` is now implemented by default.
  12. The main.html file. <!doctype html> <html> <head> <meta charset="utf-8" /> <link href="{{ root }}/app.css" rel="stylesheet" type="text/css"> </head> <body> <div class="flex-basic flex-row"> <div class="flex-1"></div> <div class="flex-basic flex-column"> <div class="flex-1"></div> <div id="phaser"></div> <div class="flex-1"></div> </div> <div class="flex-1"></div> </div> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/phaser.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/creature.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/p2.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-arcade-physics.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-creature.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-minimum.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-no-physics.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/phaser-split.js"></script> <script src="{{ node_modules_root }}/node_modules/phaser-ce/build/custom/pixi.js"></script> <script src="{{ root }}/bunch_of_functions.js"></script> <script src="{{ root }}/decorators.js"></script> <script src="./app.js"></script> </body> </html> The app.js. var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create }); function preload() { game.load.image('sky', 'assets/background.png'); game.load.image('dragonTexture', 'assets/dragon_character_texture.png'); game.load.json('dragonMesh', 'assets/dragon_character_mesh.json'); } var dragon = null; function create() { game.add.image(0, 0, 'sky'); dragon = game.add.creature(450, 350, 'dragonTexture', 'dragonMesh'); dragon.scale.set(25.0); dragon.play(true); // true = loop } Error: pixi.js:76 Uncaught TypeError: PIXI.Point is not a constructor at Phaser.Stage.PIXI.DisplayObject (pixi.js:76) at Phaser.Stage.PIXI.DisplayObjectContainer (pixi.js:904) at new Phaser.Stage (phaser-split.js:9193) at Phaser.Game.boot (phaser-split.js:13780) at Phaser.Device._readyCheck (phaser-split.js:40872)