Rojoss

Members
  • Content Count

    16
  • Joined

  • Last visited

About Rojoss

  • Rank
    Member
  • Birthday 06/21/1992

Contact Methods

  • Website URL
    http://curvefever.io

Profile Information

  • Gender
    Male
  • Location
    Amsterdam, Netherlands

Recent Profile Visitors

737 profile views
  1. I'm having trouble creating a custom mesh. The documentation doesn't help much to be honest and I've looked at the source code of Plain and Rope but after that I'm still unable to get it working. The way we did it for the past months was to extend the Rope and override the way rope works. With this solution we're having a lot of UV issues and we have too little control so we wanna make a custom mesh. Basically all we have to do is make a dynamic line so in the tick loop we add/remove points from the line. This is pretty much what I made now and I've tried different draw modes and different triangulation. https://gist.github.com/Rojoss/83f67295f3abbdca728247611703ec9f So a couple questions, Does the mesh update when I set the vertices, uvs and indices or is there something else that needs to be done? Is there some documentation on how to do triangulation for the different draw modes? Any other idea why my mesh doesn't render anything?
  2. Yeah I'm aware but there is no shortcut for it so it's easier to have an overlay. It's also annoying because if you close the dev tools the FPS counter disappears it's just not ideal. Oh really? We were actually thinking about doing all the UI in the DOM including popups, pre and post game screens, scoreboard etc which would be rendered on top of the canvas. The performance won't really matter if we have popups open and post game screen etc but I'm pretty sure we'll end up with some UI/HUD during the game. So you would then recommend doing that UI through PIXI as well? It would save a lot of time if we can do it in the DOM because PIXI doesn't have that much UI components. ---- Going a bit off topic maybe so I guess this topic has been resolved. The 30 FPS must be because of the 30Hertz monitor because all the examples, benchmarks and other PIXI games all run at 30 FPS.
  3. Hm I see.. I guess we'll just have to accept it that the game is not gonna run great on crappy monitors It's kinda weird that it's all depended on the refresh rate of the monitor. Disabling vsync like that isn't really a go to solution for users I guess we can put it somewhere in a troubleshooting guide but that's not ideal of course. So just a canvas without PIXI or should I initialize it with PIXI? The FPS counter is an external library and it's all DOM stuff yeah.
  4. I only have 1 window with 1 tab open in incognito (without extensions) and no other software opened on my PC and it still happens.
  5. Something that came to my mind is refresh rates of the monitors. I'm not too familiar with request animation frame but to my understanding it uses the refresh rate of the monitor. Since the performance drops exactly from 60 to 30 (50%) it made me think it might be related to that. EDIT: Just checked and the refresh rate of this 4k monitor is 30 Hertz. So I suppose that's the reason it only runs at 30FPS?
  6. It happens with the Pixi examples too. I don't do any movement, no textures, nothing happens in any kind of update loop it's just a canvas with a graphic circle that's all. Even if I have only 1 browser window open with a canvas and a circle the same thing happens. I've tried the same setup on 3 different PC's where one PC has a I7, gtx1080, ssd, 16gb ram and in general it's a really good PC and it still gave 30 FPS on this 4k monitor. Yeah I stated that I wanna avoid CSS scaling as it makes the quality unacceptable.
  7. Hey, I made a post before about scaling for high DPI monitors and thought that I came up with an acceptable solution but here I am again with some of my concerns about scaling and performance on 4k/retina displays. Even when I start from scratch and just draw a circle the performance is garbage. The weirdest thing is that the performance drops as soon as I put 1 pixel of the Chrome window on a 4k screen. So basically I have 2 screens connected and I move the Chrome window off the normal screen towards the 4k screen and immediately the frame rate drops to 30 instead of 60. I've logged the canvas and rendered size and there is no change when I put it partially on the other screen so the same stuff gets rendered. I've done the same to some other games and didn't notice this performance drop at all. It also happens with the examples and the bunny benchmark as shown in the crappy video below So my question is why the performance is suddenly so bad when I move the window over towards the 4k monitor. I would really appreciate if people have any tips on how to make sure the game looks good and performs well on 4k/retina displays. CSS scaling makes the performance better but then everything becomes extremely blurry and it's really not acceptable. Is it even possible to make web games that look great for 4k/retina displays with PIXI or in general?
  8. Thanks for the replies guys, I didn't get a notification again. I also don't fully understand why it'd do scaling on every frame. Those two examples are only executed on resize which often only happens once at the start of the game. Could you also go in a little more depth about the solution for that? I'm quite new to Canvas and html5 game development so it'd be great if you could explain how I would implement it in that way or maybe point me to an article with some more information? I found an article before that talks about Canvas performance but then I ended up with the transform CSS method which produces unacceptable quality.
  9. Hey guys, I'm looking for some advice on canvas scaling. We're working on a PixiJS game and want to have the canvas as big as possible based on a set aspect ratio. I've got it all working fine but when I started testing it on our benchmark devices I noticed the performance has dropped horribly. When I scale the canvas using CSS transform the performance is perfect but then the graphic quality is unacceptable. Does anyone have some advice how to get great scaling on any device (including 4k monitors) while still maintaining performance and good graphic quality? --- Good performance but bad quality scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; canvas.style.transformOrigin = '0 0'; canvas.style.transform = `scale(${Math.min(width / Constants.FIELD_SIZE.x, height / Constants.FIELD_SIZE.y)})`; this.app.renderer.resize(canvas.width, canvas.height); Good quality scaling but bad performance scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; canvas.width = width * ratio; canvas.height = height * ratio; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; if (height / Constants.FIELD_SIZE.y < width / Constants.FIELD_SIZE.x) { this.scene.scale.x = this.scene.scale.y = height / Constants.FIELD_SIZE.y * ratio; } else { this.scene.scale.x = this.scene.scale.y = width / Constants.FIELD_SIZE.x * ratio; } this.app.renderer.resize(canvas.width, canvas.height);
  10. Thanks for your reply and sharing that repo. I've looked through the setup quickly and didn't really find big differences between the package.json file and such. I'm unable to find any usage of pixi-sound in your repo, could you point me to some code that imports it and uses it? I think our dependencies are also pretty tight, most of them are loaders for webpack and a bunch of react dependencies because we use React for the UI instead of Pixi. I'm not too experienced with NPM and TS but the thing I noticed is that not everything has types. For example the pixi-extra-filters and pixi-display modules don't have any types which might be the reason it doesn't compile?
  11. Hey guys, we're having trouble using the pixi-extra-filters module in our project. Could someone check if this setup is wrong? package.json: https://gist.github.com/Rojoss/ea1c4bf6d7fd823ab8999df295f672ed We also use pixi-display and are unable to use static types for that. So everywhere we wanna use DisplayGroup we have to use any. We can still use new PIXI.DisplayGroup though and the game runs fine with it. So it really is just a TS compile issue it seems so I assume we've set something up wrong. It'd be great if someone could help us out or share their TS PIXI setup.
  12. Yeah, that sounds great. Alrighty, I suppose we can do most with CSS animations but I'll look into it already saw some neat animations made that work with react. --- Are you familiar with setting up a project with React and PixiJS? I've spend all day trying to get the dev environment set up without any luck. We think it'd be great to use Typescript which seems to make everything much harder when setting it up. I've tried webpack, rollup and browserify but I can't get it working together smoothly. Setting up either react or pixi works fine but combing them and still having hotloading working and being able to build etc is really tough. Most of the tutorials and templates are really oudated and I can't get them to work anymore. I saw you replied on a few other topics that mentioned Pixi and React together so I though maybe you know how to set this up properly. Ideally we also seperate the code from the game and the interface. This is what we have currently. While it compiles and doesn't give errors and such it doesn't actually hotload, like it doesn't even compile the code when I make changes. (webpack still prints out a bunch of stuff when I change a file) Hotloading also doesn't work and it doesn't even have typescript so it's far away from working perfectly. Webpack config: https://gist.github.com/Rojoss/0c0fb0d67d29b87fca93c3177ee12bfd Package json: https://gist.github.com/Rojoss/d9e89afb9cc261937dfa2c216d0071ce Folder structure > Project root > src index.html > game > js > interface > js
  13. Thanks for the advice on React. Never heard about it before but I've followed several tutorials and it seems really great and performing very well based on the benchmarks I've seen. Currently the main concern I have is the routing part because it seems weird to have a history and changing URL for a game UI. So when you navigate to your profile page or something it should just replace the view with the profile and not add it to the history and change the URL. But I suppose I would have to write some kind of custom routing for this. Another concern is that it's not very designer friendly because the html stuff is mixed with the logic/JS code. I'm sure the designers will be able to get used to this though. The state stuff is really awesome that it just updates the actual DOM automatically when the state is updates for specific elements. Before your reply we did some research on handlebars and thought that would be great to do. Especially because it'd be very easy for designers to create templates with handlebars. React seems much better regarding performance though so we'll probably look into React more first. We just have to figure out how we're gonna handle switching views and such. Another thing I'm a little worried about is animations, particles and other stuff. Since React will only render things in the dom that have changed will it work if we animate elements with javascript? I read some stuff that you can set up CSS animations for begin/end etc but in some cases CSS animations might not be sufficient I assume.
  14. Thanks for all the answers they'll be very helpful for us for deciding what to use. To export the game for different devices for example the one you mentioned. (Cordova) We have build scripts that modify the build when it's completed to support retina. It's really hacky but it works, we actually had a meeting with several Unity developers during GDC last week and they weren't aware this was an issue and will be putting it on the roadmap for the near future probably. Could you maybe give me some names/examples/links of these more functional approaches? I've never really made full JS web applications so my knowledge about these kind of topics is quite limiting. Just a search term would be sufficient.
  15. Yeah that's the main reason most users are unable to load the game. Firefox has much faster load times than for example Chrome. We've pretty much already decided that we should step away from Unity if we want to make accessible games which is our main vision. I've read through some services that create mobile apps based on web applications/games but I've read a lot of things about slow WebGL rendering. I think we should be using PixiJS for the rendering so that we can easily define which rendering method to use. If you don't agree I'd like to hear why it's better to only target WebGL or use something different. Making everything yourself is always great but can also be really time consuming. Since we basically just have to port the game with a new design and some changes it'd be much easier to just get started with existing tools and frameworks. Based on the research I've done so far I think we can do with just PixiJS for the game itself with a few small libraries for audio and input handlers etc. And then for the UI I'm still not sure. Pretty much everywhere I read that it's better to put the UI outside of the canvas in the DOM. I've also heard people say that most exporting services don't support DOM elements and only export canvas. Since we'd like to have a downloadable version of the game and a mobile version it's quite important for us that this is possible. For designers it must be really simple to setup UI views and elements. Most of the UI won't be static and there will be many different screens/views. For example a shop page, profile page, rankings page, lobby screen and so on. Personally I think it'd be great to use a MVC pattern for this with something like Ember, Angular or whatever but I suppose this is gonna be hard to combine with the canvas and the code base would become a mess. All the popular frameworks available use entity component systems and don't have UI functionality integrated. So it doesn't make much sense to create the UI using those frameworks. Unity also uses ECS but since Unity has a nice interface for designers it actually makes sense but we won't have the time to create a tool for our designers to create interfaces. What do people think of combining a MVC pattern for the UI with a ECS system for the game engine/framwork? And if it makes sense to do so what systems would be best to use, how would the communication go between the game engine and the UI framework? For example if we write a very basic ECS game engine using PixiJS for the rendering, and then have something like AngularJS for the UI like all menus etc. I'm sorry if I'm being too vague but there are so many possibilities and we'd like to get a good start and set everything up properly.