JynX
Posting Freak
- Feb 6, 2016
- 710
- 438
HabboTML5
"A new generation of Habbo"
"A new generation of Habbo"
You must be registered for see links
HabboTML5 was started on the belief that there should be some attempt at creating a version of Habbo even after the final goodbye of Flash and to also not require us as developers to rely on Sulake's development to further ourselves. This project has been done to expand upon the contributors knowledge in the field and to also give something back to the community after all it has done for us. And most importantly of all this, fuck Sulake, we can do it better than they can. 
- Provide something "stable" before Flash's final goodbye
- Utilize modern libraries and standards
- Keep organization for further developers down the road
- Utilize modern libraries and standards
- Keep organization for further developers down the road
-
-
-
-
You must be registered for see links
-
You must be registered for see links
-
You must be registered for see links
-
You must be registered for see links
- Loading screen
- NEW: Loads all assets prior to landing being shown (obviously.. how else would it work?)
- NEW: Authenticates the user using a single sign on token
- Landing screen
- NEW: Loads all statistics for the user (excluding avatar currently)
- NEW: Hotbar at the bottom renders properly & works properly
- Room screen
- NEW: Generates room layouts the same way Habbo does
- Generates floors and walls
- Does not generate stairs (yet)
- 64x64 empty room generated in 1.5s
- NEW: Room camera drags
- NEW: Hovering over a tile does work
- TODO: Change renderer to draw tiles and walls instead of utilizing images to assist with dynamic floor/wall sizes
- NEW: Generates room layouts the same way Habbo does
You must be registered for see links
You must be registered for see links
You must be registered for see links
You must be registered for see links
You must be registered for see links
(GIF's frames make it seem laggy, sorry!)
You must be registered for see links
(mobile view)
JavaScript:
this.loadingText = new PIXI.Text('Loading funny message... please wait.', { fontFamily: 'Diodrum', fill: 'white', fontWeight: 800 });
this.loadingPercentage = new PIXI.Text('0%', { fontFamily: 'Diodrum', fill: 0x999999, fontSize: 16, fontWeight: 800 });
this.loadingLoader.load((loader, resources) => {
this.loadingImages = {
frame: new PIXI.Sprite(resources.loading_frame.texture),
stack: new PIXI.Sprite(resources.loading_stack.texture),
image: new PIXI.Sprite(resources.loading_image.texture),
bar_frame: new PIXI.Sprite(resources.loading_bar_frame.texture),
bar: new PIXI.extras.TilingSprite(resources.loading_bar.texture, 1, 18)
};
this.loadingContainer.position.set(-this.loadingImages.frame.width / 2, -this.loadingImages.frame.height / 2);
this.loadingContainer
.addChild(this.loadingImages.stack)
.addChild(this.loadingImages.image)
.addChild(this.loadingImages.frame)
.addChild(this.loadingImages.bar_frame)
.addChild(this.loadingImages.bar)
.addChild(this.loadingText)
.addChild(this.loadingPercentage);
this.loadingImages.stack.position.set(-9, 0);
this.loadingImages.frame.position.set(-95, -51);
this.loadingImages.image.position.set((this.loadingImages.frame.width / 2 - this.loadingImages.image.width / 2) + 5, (this.loadingImages.frame.height / 2 - this.loadingImages.image.height/ 2) - 6);
this.loadingImages.bar_frame.position.set((this.loadingImages.frame.width / 2 - this.loadingImages.bar_frame.width / 2) + 9, (this.loadingImages.frame.height / 2 - this.loadingImages.bar_frame.height / 2) + 300);
this.loadingImages.bar.position.set(4,4);
this.loadingText.anchor.set(0.5);
this.loadingText.position.set(this.loadingImages.bar_frame.width / 2, -40);
this.loadingPercentage.anchor.set(0.5);
this.loadingPercentage.position.set(0, 80);
});
this.mainLoader.on('progress', (loader, resources) => {
this.loadingPercentage.text = Math.ceil(loader.progress) + '%';
this.loadingImages.bar.width = Math.ceil(loader.progress / 100 * 393);
});- Room screen
- NEW: Redrawing tiles instead of utilizing images, view Codepen for more information
N/A
You must be registered for see links
Last edited:
