All Activity

This stream auto-updates     

  1. Yesterday
  2. I thought in to zip the website as an arcade script and sell it on codecanyon or other websites. Is it a good idea?
  3. 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 < this.map.length; i++) { const layer = this.map[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); } } } }
  4. Hahaha I cryed of laught here. I will change to javascript and wait not have so many troubles as with typescript. Thank you.
  5. I updated the article with HTML and CSS. It should be more complete now. I also added a GitHub repo with a working example.
  6. 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.
  7. 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!
  8. 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); canvas.style.transformOrigin = "0 0"; canvas.style.transform = "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; canvas.style .marginTop = 0 + "px";canvas.style .marginBottom = 0 + "px"; canvas.style .marginLeft = margin + "px";canvas.style .marginRight = margin + "px"; }; if (center === "vertically") { margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; canvas.style .marginTop = margin + "px";canvas.style .marginBottom = margin + "px"; canvas.style .marginLeft = 0 + "px";canvas.style .marginRight = 0 + "px"; }; canvas.style.paddingLeft = 0 + "px";canvas.style.paddingRight = 0 + "px"; canvas.style.paddingTop = 0 + "px";canvas.style.paddingBottom = 0 + "px"; canvas.style.display = "-webkit-inline-box"; return scale; };
  9. 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.
  10. +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.
  11. 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: color-cube_babylonjs-typescript.zip 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" },
  12. 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.
  13. And the Poscar for the optimizations goes to...
  14. 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 !
  15. 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.
  16. 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*.
  17. Sorry for this... but I HATE TYPESCRIPT!!!! Oh my god, almost I had a 'piripaque' here. Solved, I will to javascript, never in this life I want to program in typescript again!
  18. how can I extends the AnimatedSprite from pixi 4.8.7? I'm not able to do this in vscode because it says that the constructor of base class (AnimatedSprite) should be 0 args but got 2. Why this? Se my code: import 'pixi.js'; export class Animation extends PIXI.extras.AnimatedSprite { constructor (name:string, textures:PIXI.Texture[], loop:boolean=true) { super(textures,loop); this.name = name; this.anchor.set(0.5); } } I'm using typescript. At the line with the super give error in vscode, and the this.name and anchor it like if not exist. What should I do?
  19. I wrote an article on this. Thoughts welcome! https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c
  20. Last week
  21. Take a look at our website, it's a 100% handmade with many features like big sites.
  22. I'm following a course, using CE version 2.10. I used it on a prior project (same version) in which init: function() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; }, worked perfectly to align and scale the background, but for some reason that same code is not working on the new project. We're referring to the phaser.min.js in a script section at the bottom of the index.html file as before. I'm literally stuck. I know I can use coordinates, but that is a pain in the butt. It seems to be roughly scaling, but with the background image definitely not centered either horizontally or vertically. I'm editing with Visual Studio Code version 1.34 stable. BTW, can you suggest a nice bracket coloring extension that works nicely with Phaser?
  23. I want to use Browserify with Pixi.js v5, because I want to create a lot of examples for learning and I do not want to use Webpack (Gulp, Grant and so on) because they require a lot of disk space on my laptop. I use TypeScript too. Could you give me a simple project in the archive with a few TypeScript files that allows me to create a bundle for Browser? Please, answer in my theme:
  24. I want to use Browserify with Pixi.js v5, because I want to create a lot of examples for learning and I do not want to use Webpack (Gulp, Grant and so on) because they require a lot of disk space on my laptop. I use TypeScript too. Could you give me a simple project in the archive with a few TypeScript files that allows me to create a bundle for Browser?
  25. Few days back I released my first mobile game made using Phaser 3 framework. It's a simple game but was hell lot of work. In the end I learnt a lot in the process. https://lakshyadubey.itch.io/rgb
  1. Load more activity