I’ve heard this question a lot.
How do I make my Phaser game look good on all devices?
There are many different approaches. At first look Phaser’s Phaser.ScaleManager.SHOW_ALL seems to be the silver bullet. In reality it’s never worked for me. In fact the only scale type I ever use is Phaser.ScaleManager.USER_SCALE which means “I’ll do it myself”.
My most common technique is to lock orientation to either portrait or landscape and then crop horizontally or vertically. Pick whichever suits your game most.
In this example I have left the safe zone guides in to illustrate what’s going on. In this game I can afford to crop horizontally. Notice how when the window gets skinnier the game snaps to the top of the page and the grass background disappears. This is because the media query has detected a mobile device size and will then make the game full screen. …
TL:DR; Show me the code! https://github.com/mattcolman/react-progressive-list
The DOM is typically slow at rendering long lists. It’s a common problem in web development today, especially on mobile web.
Enter the virtualized list!
A virtualized list works by only rendering rows that are visible on screen, and ignoring the rest. react-virtualized is the big one in the react world. It’s a great package, and if you have an infinite loading list I’d say it’s the best solution (unless you make your own virtualized list like Twitter Lite).
react-virtualized tracks scrolling of the view, mounting and unmounting rows on the fly. Typically scrolling the list (even when swiping really fast) you would expect to only mount 1–2 new rows each frame, which shouldn’t exceed your ~16ms quota to achieve a smooth scroll. …
Copied from my personal blog, written in 2015.
A problem came up the other day at work that got me thinking.
I wrote five really nice functions that all performed asynchronous tasks.
//NOTE: this.setTimeout is just an alias for setTimeout but I’m using this to demonstrate scope.
//NOTE: These aren’t actually the really nice functions I wrote.a(cb) {
this.setTimeout(()=> {
console.log(‘a is called’)
cb()
}, 1000)
}b(cb) {
this.setTimeout(()=> {
console.log(‘b is called’)
cb()
}, 1000)
}c(cb) {
this.setTimeout(()=> {
console.log(‘c is called’)
cb()
}, 1000)
}d(cb) {
this.setTimeout(()=> {
console.log(‘d …
Copied from my personal blog. Written in 2015.
I once went to a job interview for a front end team lead role. The interview started well, it was very casual, we shared stories, we joked, we laughed and then BAM! The mood changed.
Ok show us how to make Tic Tac Toe. Here’s a whiteboard.
I wasn’t expecting this at all. I froze. First of all I asked, “What’s Tic Tac Toe again?”
Tic Tac Toe == Naughts and Crosses
Ah yes. I mean, Tic Tac Toe is a very easy game to make. I’d just finished creating a Candy Crush clone, so, how hard could it be to explain it on the spot? I pretty much said “Well, it’s very easy. You’d just store the spots in an array. Yep. That’s it. And then, if you click here, just mark it and check if you’ve won…yep…simple.” …
Sure, you’re probably already using Pull Requests in your team. You know it’s best practice and it may have proven to be useful on a few occasions, but are you getting the most out of them?
In many tech teams Pull Requests are mandatory to get code into the develop branch, but that’s the only rule. The result is this:
1. PR is massive! 500+ lines of code.
2. Everyone receives the PR notification but all assume that someone else will review it so they ignore it.
3. Maybe you assign someone to a PR to make sure it gets reviewed, but the assignee is super busy so it won’t get reviewed today, or tomorrow…
4. Your peers feel nervous about giving the :shipit: emoji because somehow that makes them responsible for your code.
5. It may take an hour or more to properly review > 500 lines of code so instead they just skim read it, looking for typos, and then give a :thumbs_up: emoji instead (only :shipit: makes you accountable…
(for webpack users)
TL;DR Take me to the code!
If you’re like me and you love Phaser and Webpack, then this package should come in handy. I’ll also note that Phaser 3 uses Webpack 2 which is very exciting!
Webpack loaders mean that my assets (images, audio etc) all get compressed and fingerprinted at build time, so I never have to be concerned with users seeing an old cached version of an image, or even worse a cached json file for a spritesheet!
The problem I ran into was that loading assets became very tedious. …
Phaser ListView is my first open source project, available for install via npm.
npm install phaser-list-view too easy!
This is pretty much an iOS-like ListView for Phaser.
Current features include:
- Easy to use API.
- iOS-like momentum and bounce back.
- Great performance for long lists as any off-screen entities are not rendered.
- Low-level Scroller exported for advanced users.
- ListView, SwipeCarouser and DirectionalScroller exports.
- WheelScroller to create say…an iPod!
Anyway, it’s been cool to open source my code and I’m pretty excited to see people using it already.
Check it out https://github.com/mattcolman/phaser-list-view
More open source stuff to come!
Originally published at blog.mattcolman.com on January 1, 2017.
About
