emiliobool Posted February 4, 2015 Share Posted February 4, 2015 Hello friends, I just wanted to share my approach on using Phaser with Coffeescript, before anything I want to make a disclaimer here, this was done during the past global game jam, so, we only had 24 hours to finish and this was my first experience with both Coffeescript and Phaser but I learned a lot from it, so, this deff shouldn't be used as reference for any kind of discussions on the proper way to do stuff, take it like a source of inspiration if you want, it's just my own personal approach.Also, I don't plan to continue this project as it was just a demo for the gamejam but I really hope this could help someone save time Github: https://github.com/horchatas/ggj2015 Extending Sprites Ok, so first thing I tried and learned was to extend a Sprite, more specifically the hero sprite, and I gotta say, there is no need for doing that unless you want to constantly modify the internal properties or do some other stuff,for the hero it kind of makes sense, but probably no need to extend sprite for other assets, First thing about extending a Sprite, doing "extends" with coffeescript works fine, you still need to call the parent constructor and you need to manually add the asset to the world, also, you need to manually enable the physics engine, but tha's all so, you have to:super @game, 1920, 1500, 'player', [email protected] [email protected] this, Phaser.Physics.ARCADEhttps://github.com/horchatas/ggj2015/blob/master/src/Hero.coffee States After finishing the classic RPG map engine, I realized I needed some way for doing states, so since I had already read a lot of the Phaser code I read more about the Game class, by the time I found about the StateManager class and States I realized that was the Phaser way of doing states and everyone was doing it, but I actually wasted a lot of time by not knowing what to search for and I didn't see it in the demos either, so, things I learned about States: you might want your main game class to be a State itself, this way you have:- create- preload- update/render .. methods, and those will get called when your game starts without having to write so much codeclass Game extends Phaser.State constructor: -> new Phaser.Game 640, 360, Phaser.AUTO, 'game', this preload: -> create: -> update: -> render: ->https://github.com/horchatas/ggj2015/blob/master/src/Game.coffee but that's not all, the other advantage is a State class give you access to the game instance itself, so you have access on every method and any other state class without having to pass the game instance so, from there you can add other State classes and organize your code, and of course make use of all normal State events @game.state.add 'fightState', new FightState @game.state.add 'creditsState', new CreditsState @game.state.add 'mapState', new MapStateLoading and Google Fonts Ok, something I want to share about this, if you go to the demo you will see// The Google WebFont Loader will look for this object, so create it before loading the script.WebFontConfig = {// 'active' means all requested fonts have finished loading// We set a 1 second delay before calling 'createText'.// For some reason if we don't the browser cannot render the text the first time it's created.after reading that comment I knew I was going to have trouble, but after playing with it what I had to do was this: loadComplete: -> @loadingText.setText("Load Complete"); @assets_loaded = true if @game.state.current == "default" @create() preload: -> @game.load.onLoadComplete.add @loadComplete, this WebFont.load( active: ()=> @gfonts_loaded = true @create() google: families: ['VT323::latin'] ) create: -> if @assets_loaded && @gfonts_loaded && @game.state.current == "default" @game.state.start 'fightState'so basically what I did was create a loadComplete listener, for all the assets in the game, but also a callback for active on google fonts, so, the game doesn't start unless both are loaded (and calls the create method) those ifs checking if the current state was default was only to make sure loading new assets later in a different state wouldn't trigger the events, but thinking about it, it's probably unneeded since switching states probably removes all listeners? I don't know that fixed it, and also lets you make your own preloader, kind of hacky solution but it worked callbacks/scope before finishing the project I saw a lot of potential in javascript/coffeescript for game development, it's javascript nature to use callbacks, and coffeescript makes them easier, so, having lot of events with callbacks is really cool, and you can pass the "this" context by using => instead of -> and preserve access to everything, one use for that was here in the credits section: where I easily created self-made timed events (based on the position of the credits) @runAtProgress 0.24285714285714285, () => credits_image = @images_group.create 243, 30, 'credits3' credits_image.alpha = 0https://github.com/horchatas/ggj2015/blob/master/src/CreditsState.coffee i really liked the outcome since it let you make some sort of self-made language for events, while it was just old normal way of calling a function with a anonymous callback, but it looked like it was some sort of script made for it compiling for compilation I combined all files into a single one:coffee --join assets/js/game.js -cw src/that way you can make use of other classes without having to manually or dynamically load all .js files for your game things I would do different: make better use of states, I really wished I knew a lot of Phaser concepts before smashing the keyboard and trying to make things work, it kind of sorted itself in the end but there were better ways of doing thingsnot trying to extend things other than states, there is mostly no need to extend things unless reusability becomes an issue I just wanted to throw this in here just in case someone finds it helpful GDesplaces 1 Link to comment Share on other sites More sharing options...
Recommended Posts