All Activity

This stream auto-updates     

  1. Past hour
  2. Haxe is awesome for people who dont like typescript Though with that there's no proper externs for v5 yet.
  3. Here is one example: Is a simple quickstarter project with PixiJs and Typescript using Parcel. Here are it's default scripts: "test": "karma start", "start": "npm run clean && parcel src/index.html", "build": "npm run clean && parcel build src/index.html --public-url ./", "build_serve": "npm run build && http-server ./dist", "clean": "rimraf ./dist ./.cache" In order to build the project just run 'npm run build'. If you want also serve it, just run 'npm build_serve' (it uses http-server in order to serve it as you). About the disk space, having the dependencies globally is not the best solution and it has a lot of troubleshoots. There are many other ways in order to 'share' dependencies between project more safer and efficient than that. You can have for example a 'monorepo' like infrastructure, in order to achieve it. Check it out yarn workspaces and the lerna project, I am sure it will make you re-think the way you are managing your projects. One HUGE advantage of that, is that it will enable you to share ALL your dependencies, not only Browserify and Typescript. With this improvement, you will no longer need to zip/unzip your project anymore, since most of the MB you see now when zipping/unzipping are from the node_modules. So in resume, check it out to move your examples into a monorepo-like infrastructure. With that, you will solve 2 problems: 1- Share ALL dependencies (and do it safely), since now you are only sharing Browserify and Typescript (as far as I know) 2- Avoid zipping/unzipping your project, that I am sure that is a costly extra step. That of course you can automatize or whatever, but you can get rid of it with this solution. If you need some help about that 'monorepo-like' infrastructure, you can DM me.
  4. Today
  5. Yeah, demo would be a good thing Anyway, even if we debug it and find the bug: i recommend to read my tilemap implementation for v5, it was somewhere here: . It has general algorithm that allows not to spawn 100x100 or 1000x1000 tiles for the map and saves a lot of memory and performance. When I approve port of pixi-tilemap from v4 it will be even faster.
  6. Guys, how can i move a container smoothly. i had tried to move it with TweenMax, but unsatisfied . here is a part of my codes for reading(without TweenMax). forwardButton .on("touchstart", e => { let arg = 10, move = 0; this.timer = setInterval(() => { this.scenesStage.x += arg }, 200); }) .on("touchend", e => { clearInterval(this.timer); }) And here is the codes (with TweenMax) forwardButton .on("touchstart", e => { let arg = 10, move = 0; this.timer = setInterval(() => {,1,{x: `+=${-(arg + 40)}`}) }, 200); }) .on("touchend", e => { clearInterval(this.timer); }) to hope your help.
  7. Nevermind, the problem was in the last line. Instead of clearing all the arrays, it somehow combined them!
  8. Hey guys. I'm using CreateJS to make my javascript game. According to the documentation, objects are layered one on top of the other, in order of their addition to the stage. To control layering, I push to multiple "layer" arrays, and add the objects from those layers. However, it isn't working! Objects that are created first are the ones on the bottom, not objects that are added first. Here's my adding code, as you can see it adds in order of the arrays. for(let a = 0; a < blockLayer.length; a++) { stage.addChild(blockLayer[a]) } for(let b = 0; b < floorLayer.length; b++) { stage.addChild(floorLayer[b]) } for(let c = 0; c < entityLayer.length; c++) { stage.addChild(entityLayer[c]) } for(let d = 0; d < lightLayer.length; d++) { stage.addChild(lightLayer[d]) } for(let e = 0; e < uiLayer.length; e++) { stage.addChild(uiLayer[e]) } stage.update(); blockLayer = floorLayer = entityLayer = lightLayer = uiLayer = []; Anyone with experience in CreateJS? Help would be really appreciated!
  9. Do you have a running example we can debug?
  10. Anyone has any ideas why the responsive code doesn't work?
  11. Yesterday
  12. I thought in to zip the website as an arcade script and sell it on codecanyon or other websites. Is it a good idea?
  13. Hello, I'm trying to generate a world map of tiles. But now I'm stuck, I'm getting an error which is impossible to understand. Maybe you will see what's going wrong: const MAP_WIDTH = 6400; // when I make this value 3200 or 832 it works else not const MAP_HEIGHT = 6400; // when I make this value 3200 or 832 it works else not const MAP_WIDTH = 6400; // when I make this value 3200 or 832 it works else not const MAP_HEIGHT = 6400; // when I make this value 3200 or 832 it works else not const TILE_WIDTH = 64; const TILE_HEIGHT = 64; map = [ Array.from({ length: MAP_WIDTH }, (_, i) => { if (i <= (MAP_WIDTH / 64) || i % (MAP_WIDTH / 64) === 0 || i % (MAP_WIDTH / 64) === (MAP_WIDTH / 64) - 1 || i >= (Math.pow(MAP_WIDTH / 64, 2)) - (MAP_WIDTH / 64)) { return 1 } return 0 }) ] createMap = () => { const cols = MAP_WIDTH / TILE_WIDTH; const rows = MAP_HEIGHT / TILE_HEIGHT; for (let i = 0; i <; i++) { const layer =[i]; for (let j = 0; j < rows; j++) { for (let k = 0; k < cols; k++) { const imageType = layer[j * cols + k]; let tile = PIXI.Sprite.from(this.images[imageType]); tile.x = k * TILE_WIDTH; tile.y = j * TILE_HEIGHT; tile.width = TILE_WIDTH; tile.height = TILE_HEIGHT; this.container.addChild(tile); } } } }
  14. Hahaha I cryed of laught here. I will change to javascript and wait not have so many troubles as with typescript. Thank you.
  15. I updated the article with HTML and CSS. It should be more complete now. I also added a GitHub repo with a working example.
  16. hum, this can maybe give you some inspiration. When i boot my app.exe it load from node first. this is not finish yet but here how it can look. window.onload = function() { //#STEP1: CHARGER LES LIBS const jsLibs = [ //#PIXI "pixi", "pixi-filters", "pixi-layers", "pixi-lights", "pixi-spine", // "pixi-heaven", "pixi-projection-spine", "pixi-sound", "pixi-zero",//custom //#TWEEN "TweenMax", "TimelineLite", "EasePack", //#OTHER "papaparse", "polyfill",//custom ]; //#STEP2: CHARGER LE LOADER const jsLoader = [ 'engine/loaders', ]; //#STEP3: PRELOAD DATA //#STEP4: CHARGER LES CORE const jsCores = [//TODO: //#UTILITY "utility/ECC", //#ENGINE "engine/app", "engine/stage", "engine/displayGroups", "engine/camera", "engine/systems", "engine/battlers", "engine/players", //#GAME OBJETS "obj/objs", //#SCENE "scene/scene_base", "scene/scene_Loader", "scene/scene_Boot", "scene/scene_IntroVideo", "scene/scene_Title", "scene/scene_Map1", //#UTILITY "utility/pixiMapEditor", ]; //#STEP5:Trouver et scanner tous les DATA2, creer une list dans loader //#STEP6:$app.initialize() let step = 0; function nextStep() { switch (++step) { case 1: loadJs(jsLibs,'libs'); break; case 2: loadJs(jsLoader,'core'); break; case 3: $loader.mainLoad(nextStep); break; case 4: loadJs(jsCores,'core'); break; default:$app.initialize();break; } }; function loadJs(links,folder) { const head = document.getElementsByTagName('head')[0]; let length = links.length; links.forEach(name => { const script = document.createElement('script'); script.async = false; script.src = `js/${folder}/${name}.js`; head.appendChild(script); script.onload = function() { if(!--length){nextStep()}; }; }); }; nextStep(); i cool way to scan all folder from you projet and create link files for after use it in pixijs /** SCAN ALL RESSOURCE IN DATA2 and create link */ const scanDATA2 = () => { const recursive = require('recursive-readdir'); function ignoreFunc(file, stats) { const isDirectory = stats.isDirectory(); if(stats.isDirectory()){ return file.contains('SOURCE') || file.contains('source'); }else if(stats.isFile()){ return !file.contains('.json') && !file.contains('.webm'); }; }; recursive("data2", ["secure.dll", ignoreFunc], (err, files) => { files.forEach(PATH => { const split = PATH.replace('.','\\').split('\\'); const name = split[split.length-2]; if(name.contains('-')){ // isMultipack const _name = name.split('-')[0]; // nom sans -0 !this.LINKS[_name] && (this.LINKS[_name] = []); this.LINKS[_name].push( {name:name,path:PATH.replace(/\\/g,"/")} ); }else{ this.LINKS[name] = PATH.replace(/\\/g,"/"); }; }); return nextStep(); }); }; you will get all your project files links like that's for easily use pixiloader ! note : check for ` loader.onComplete.add((loader, res) => { callback() }); when loader finish you can call a callback and start a new loader with new stuff.
  17. P.s. thank you very much for your amazing work, @ivan.popelyshev. I've been using your pixi-projection plugin recently and it's awesome!
  18. i use this on my side But my app are intended to be played in full screen, frame and scale mode are luxe feature. requestFullScreen() { var element = document.body; if (element.requestFullScreen) { element.requestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } this._fullScreen = true; }; cancelFullScreen() { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } this._fullScreen = false; }; scaleToWindow() { const canvas = this.view; let scaleX, scaleY, scale, center; scaleX = window.innerWidth / canvas.offsetWidth; scaleY = window.innerHeight / canvas.offsetHeight; scale = Math.min(scaleX, scaleY); = "0 0"; = "scale(" + scale + ")"; if (canvas.offsetWidth > canvas.offsetHeight) { if (canvas.offsetWidth * scale < window.innerWidth) { center = "horizontally" } else { center = "vertically" }; } else { if (canvas.offsetHeight * scale < window.innerHeight) { center = "vertically" } else { center = "horizontally"; }; }; let margin; if (center === "horizontally") { margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; .marginTop = 0 + "px"; .marginBottom = 0 + "px"; .marginLeft = margin + "px"; .marginRight = margin + "px"; }; if (center === "vertically") { margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; .marginTop = margin + "px"; .marginBottom = margin + "px"; .marginLeft = 0 + "px"; .marginRight = 0 + "px"; }; = 0 + "px"; = 0 + "px"; = 0 + "px"; = 0 + "px"; = "-webkit-inline-box"; return scale; };
  19. Hello everyone! Guys, tell me please : if we have custom loader ( not pixi ) for load resources such as png/jpg - how to combine them with pixi loader? For example custom loader load /assets/ image folder before game starts, then in pixi we want to use this resources such as Texture.from('assets/img/...") or loader.add("someImage", "/assets/img/someImage.png") - is it possible ??? Question about caching, we dont want to load the same image twice in our custom loader, and then in pixi . Maybe if after loading resources in our custom loader and then this._loader.add("bg", "assets/bg.png"); in Pixi - the file will not load twice and getting it from cache??? Sorry for my bad english.
  20. +1 for Typescript. Webpack/Rollup are actually pretty easily configurable and versatile module bundlers. The web moves fast and it's about enabling you to use the latest and greatest tech while still supporting outdated targets as painlessly as possible. Large projects written in plain ES5 with file concatenation are usually a nightmare to maintain and work on unless they are beautifully written and documented by skilled and knowledgable people. Code editors don't know anything about the project unless you configure them to and they have complex JS analysis features. Even then it doesn't work particularly well a lot of the time. ES5 JS + namespaces look so dated and a chore to read and write at this point. Some of the Grunt/Gulp configs I've seen and worked on are far from simple too btw.
  21. I can explain what I want using the example. This example uses Babylon.js, TypeScript and it draws a cube. You can run it on Playground: click to run This is an archive with source code: This archive requires only 1.34 MB. If you unzip it you will see that it requires 7.52 MB. It is good because it allows to create a lot of examples for studying and it will not spend a lot of space on my laptop. If you have the browserify and typescript that is installed globally you can bundle the "Program.ts" and "Game.ts" files using this command: npm run release-client The "bundle.min.js" file will be created in the "dist_client" folder. You can just open the "index.html" file in your browser. I use "http-server" module to run examples. I need a similar archive with very simple Pixi.js example that contains a few TypeScript files. My "release-client" command looks like this in the package.json file: "scripts": { "clear": "rmdir /s /q dist_client", "compile-debug-client": "tsc -p tsconfig.debug.client.json", "compile-release-client": "tsc -p tsconfig.release.client.json", "bundle-release-client": "browserify dist_client/Program.js -o dist_client/bundle.client.js", "uglify-release-client": "uglifyjs dist_client/bundle.client.js -o dist_client/bundle.client.min.js", "release-client": "npm run compile-release-client && npm run bundle-release-client && npm run uglify-release-client" },
  22. Russian english here. Thank you! I just had a trip through Sochi, Barselona, Ibiza and Palma visiting major pixijs users and helping them for food I'll board plane to Moscow in a hour. hm, looks like CoffeeScript is the thing that you need 😃 CakeScript doesnt exist, unfortunately. TS is good for people who came from Java/C#/ActionScript3. However it adds complexity for all the tools and plugins. I use TS only with namespaces and simple concatenation with "tsc" tool. I copy "ts.d" files into separate dir to know for sure that typings that i use correspond to the version. It really helps if you have like 50k or 1m lines of code. Yes, you need balance between configs and language. People prefere very difficult configs and tools right now, I'm stick to basics. "references.ts", "tsconfig" and "ts.d" files are analogues to makefile, configure and includes. And webpack is piece of .. js tech.
  23. And the Poscar for the optimizations goes to...
  24. aalex

    Safari Cleanup Issue

    Sorry for the late reply. I ended up with 3 global canvas/renderers (which is the highest number possibly visible at a same time). I then, move them around, and clean/re-create my different scenes as need be. Works pretty fine, the performances are good, and the experience stays smooth. Thanks again all !
  25. Hahaha man, I can't express myself here cause of my limitation with English. But, you are a great person @ivan.popelyshev, I started to follow your work with Pixi some time ago and I see that you have MANY will to help people. So, apart this. I never will go back to typescript, never in my life I had so close to have a heart attack because of a language. Well, I came from using Phaser 2 with typescript and many problems happened, configure a simple project was hard as hell. C++ is so far easily than typescript and you not wast time configuring vscode. And yes, I configured the Pixi properly like it should be, and even had problems. I'm using this language for some months and had many, many problems. So to keep my health and sanity, I give up of this lang. I will use javascript... only when I take a piece of cake and drink some coffee at morning.
  26. Are you sure you've got the correct typings for your pixijs version? In v5 animatedsprite is moved from extras to PIXI namespace, and those typings have only stub class. Well, if you dont understand how to fix typings or you cant wait for answer you should use JS. In that case i recommend to clone pixijs repo to your computer because docs can wrong you too. There's a rumor that certain parts of PixiJS will be moved to typescript this year *insert evil laugh here*.
  1. Load more activity