jonforum

Members
  • Content Count

    310
  • Joined

  • Last visited

  • Days Won

    5

Everything posted by jonforum

  1. i think it can be good also in boilerplate, it a good starter and the only one without typescript!
  2. Intellisense is not perfect, sometime you need help him, especially for events. Am not using maybe the best solution but it work for me.
  3. also here a nice video for PS and AE. This one helped me a lot to do VR picture. The depthmap are rendering on AE engine for the result, but its same logic, you replace AE by pixijs and filters.
  4. also i can see some strange artefact, am not sure why but try with png high quality image. Jpg are compressed and lossy. If artefact not fixed with png, create a issue on github for the pixi team. It can maybe a displacementFilter bug !
  5. A lot of issue with your demo, so i just make a playground for you. You will also need refactoring your image depth map. You will need practice and also this is not a very good image for this kind of 3d. But your are on the good way! make more experimentation. ex: more black on eyes. https://www.pixiplayground.com/#/edit/ZiuvxzRpK-EE03nlFJdQy ps: for the online demo you can use https://www.base64-image.de/ ps: i don't use your demo because you code are inside html and my IDE don't like this. Logicly you should separate css,js from html.
  6. i can take a look, but plz make a zip projet with all stuff. I am lazy
  7. than you can save the depthMap and use dispestion in transform filter for test your result. I don't know for the english version sorry. but it should very similar.
  8. on photoshop 2020 you have a commande named generate bumpMap depthMap. its the same way if you want make stereo 3d picture for VR. you can use the depth Map with displacement filter and mouse to make a live 3d feeling https://redstapler.co/3d-photo-from-image-javascript-tutorial/
  9. well hum from what i understand, sorry if i'm wrong am not thats good like ivan in my english., so am not fully understand what your ask. But a cool way to do this can be create a special container Class. Maybe a good starting point would be to experiment with this kind of system in your project. I have nothing come to my mind because I don't know the context of your project Setter can be good idea or static methods utility with a pool, or simple methods .. use what you prefer work with. class SpecialContainer extends PIXI.Container { constructor() { super() }; set PROPRETIES(value) { this.properties = value; this.children.forEach((c)=>c.properties = value); } set SCALE(value) {// it just a very fast example! value = Array.isArray(value)?value:[value,value] this.scale.set(...value) this.children.forEach((c)=>c.scale.set(...value)); } }; Do not be shy to create your own class with your own needs. Does that sound like with what you want? maybe share your code and context.
  10. jonforum

    Flip a sprite?

    base math sprite.scale.x*=-1; width and scale are same thing scale are the normalised value.
  11. Here for you if(resource.extension === "mp4") { const texture = PIXI.Texture.from(resource.url); const videoSprite = new PIXI.Sprite( texture ); /**@type {HTMLVideoElement}*/ const videoControler = videoSprite.texture.baseTexture.source; videoControler.currentTime = 0; //jump to 0 will also autostart videoControler.onplay = function() { //TRIM VIDEO after loading or onplay videoSprite.texture.trim = new PIXI.Rectangle(0,0,400,400); videoSprite.texture.frame = new PIXI.Rectangle(0,0,400,400); }; app.stage.addChild(videoSprite); } Don't ask me why but you need do the thing async ! or pixi going crazy with gl error. So perform this inside on start. I can't investigate more because you don't join me a `launch.json` for debug in IDE.
  12. did you try texture trim ? texture.trim = new PIXI.Rectangle() texture.trim.width = 400; // crop texture.trim.height = 576;
  13. Are you able to replicate this issue with other codec video? or example with the pixijs demo video https://github.com/pixijs/examples/blob/gh-pages/examples/assets/video.mp4 If no , it can maybe just a bad codec support. You can try another one. I remember have some issue with pixijs with video used some codec ex:vp9, but fixed with another. Staxrip can help you for testing different codec setup.
  14. create a great game. (~3,4yr) Use nwjs or electron to build a build for pc,mac,ios,android,switch,xbox and sell it !
  15. oups sorry it because it was private repository, i switch to public , link should work now.
  16. it the good way to do, it will depending of your need. In simple context , if you need something very simple you can use without regex PIXI.TextMetrics.measureText() Metric are a pixi tool very powerful and can split for you arrays for you multistyle. Or in complexe a example, on my side i use regex to split string, and build a container and sprites with multiple text styles and motions worked with wordWrap! If this can help you to get a idea, here how i proceed on my side. https://github.com/djmisterjon/ANFT/blob/1bfda5a7a047ee2dcc963c59873f5f0b65b7c24c/js/game/global/texts.js#L239
  17. hey this is a awesome big work ! congrats and thanks for tuto. the tread is old , but i don't think necroPosting is illegal in the forum rule. your allowed to revive a tread.
  18. the order is important `addChild(rec,sprite,txt)` should work of if not possible `addChild(sprite,txt)` then `addChildAt(rec,0);` for pixi layer it will be something like `addChild(txt,sprite,rec)` `txt.parentGroup = goup2` `sprite.parentGroup = goup1` `rec.parentGroup = goup0`
  19. it work on my side !!!? am no understand your issue ? sorry. The rotation are from center. https://www.pixiplayground.com/#/edit/7LCZOSuDa0_e9YRw5CbDI
  20. sprite.texture.textureCacheIds[0] Am not get your issue sorry !? Maybe explain more. whats mean "If i'm publishing sprites to Pokemon fan games" ?
  21. I don't know how the view-port plugin work, but from what i am reading , it should work. sprite.anchor.set(0.5); sprite.rotation = value Should work and make the rotation from the center ! Are you able to create a playground with your plugin ? It maybe a behavior from the plugin your using ?
  22. Yes , i use this kind of stuff only in some special Utility Objects and method. ex: audio, transforms ... Ex: Instead to write all code like this ! const c = new PIXI.Container(); c.name = "master"; c.position.set(x,y); c.setZero(); const a = $audio._sounds.BT_A.play("BT_A00"); a.setVolume(1); a.setSpeed(1); a.Loop(true); I do not know if it is a question of habit or a bad habit, but I find this bottom code much more readable and functional. They all return self. (this) for allow chains., const c = new PIXI.Container().setName("master"); c.position.set(x,y).setZero(); $audio._sounds.BT_A.play("BT_A00").setVolume(1).setSpeed(1).Loop(true);
  23. oups yes sorry , the language barrier sometimes makes translation difficult! i was meaning Sugar Coding By definition, Thats can mean in javascript,, more visibility and ergonomie, but cost more performance resources. However not everyone shares the same opinion and it is a personal topic I think. Example for me use ternary instead if use ...spreads use of Template strings instead Strings use of Classes instead Function use forEach instead for use inline method (chains) with return. Object Destructuring (very rare and cost a lot but less codes) ... maybe i forget somes.. You can maybe find more good articles about Sugar codie on google. try keys "js sugar code" https://www.freecodecamp.org/news/js-diabetes-and-understanding-syntax-sugar-5de249ee9ebc/
  24. Hum My general idea is experiment 3d stereo (180) and not (360) Maybe a kind of renderer before and after with projection (am not remember but am sure i seen something to render before and after in a ticks with your projection plugin). So maybe renderer camera before to L-eye and after with shifting all layers groups X to R-eye. You know , something like this, all thing on right eye side are just little bit shifted on X position. I don't know if am clear but take a look here. http://www.angelfire.com/ca/erker/freeview.html It was this technique that I used at the time or it was fashionable to use Nvidia stereo glasses. So logicily with your camera plugin , we should able to make this work in 3d stereo (180) inside VR. By get the texture rendering before and after shifting. It's just a little difficult yet because on my first reading We need play with LowLevel pixi js with webGL EDIT: Example diablo 3 as 2d to (3d stereo 180) hack in vr https://youtu.be/2SXxU7eAjrw?t=360