Search the Community

Showing results for tags 'typescript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 249 results

  1. Hi guys, I am trying to create a Game with Ionic 2 (=> Typescript) and Phaser and so far it was fine... until that I tried to add the plugin Virtual Joystick. The line this.pad = this.game.plugins.add(Phaser.Plugin.VirtualJoystick); return an error about undefined "game" But the comment above this line works fine ... It's maybe that I don't use the correct syntax to call a plugin ... Please Help me import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { Platform,AlertController } from 'ionic-angular'; import { Storage } from '@ionic/storage'; import { HomePage } from '../home/home'; /* Generated class for the Play page. See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. */ ///<reference path="js/phaser-virtual-joystick.min.js"/> @Component({ selector: 'page-play', templateUrl: 'play.html' }) export class PlayPage { score: any; scoreObj: Number; game: Phaser.Game; map: Phaser.Tilemap; balloon: Phaser.Sprite; bg: Phaser.TilemapLayer; start: Phaser.TilemapLayer; hit: Phaser.TilemapLayer; cursors: Phaser.CursorKeys; pad; stick; test; constructor(public navCtrl: NavController, public navParams: NavParams,platform: Platform,public storage:Storage,public alertCtrl: AlertController) { platform.ready().then(() => { storage.get('scores'); storage.get('level'); }); } ionViewDidEnter(){ this.score = 0; this.scoreObj = 100; var innerWidth = window.innerWidth; var innerHeight = window.innerHeight; this.game = new Phaser.Game(innerWidth, innerHeight, Phaser.AUTO, 'myGame', {create: this.create, preload: this.preload,update:this.update, render: this.render}, true); } preload(){ this.game.load.spritesheet('balloon', 'img/balloon-01.png',112,150); this.game.load.image('lest','img/sac.png'); this.game.load.image('target','img/hole.png'); this.game.load.tilemap('level1', 'img/bg-test.json', null, Phaser.Tilemap.TILED_JSON); this.game.load.image('bg-test', 'img/bg-test.png'); this.game.load.atlas('arcade', 'img/arcade-joystick.png', 'img/arcade-joystick.json'); } update = () =>{ this.game.physics.arcade.collide(this.balloon, this.hit,() => { this.balloon.kill(); this.score = this.score + 3; console.log("hit"); }); this.game.physics.arcade.collide(this.balloon, this.start); this.game.physics.arcade.collide(this.balloon, this.bg,() => { this.balloon.kill(); console.log("bg"); this.score = this.score - 1; }); this.game.input.update(); if (this.cursors.left.isDown) { this.balloon.position.x -= 5; } else if (this.cursors.right.isDown) { this.balloon.position.x += 5; } } render = () =>{ this.game.debug.body(this.balloon); } create = () =>{ /*var plugins = new Phaser.PluginManager(this.game); console.log(plugins);*/ this.pad = this.game.plugins.add(Phaser.Plugin.VirtualJoystick); this.game.physics.startSystem(Phaser.Physics.ARCADE); this.cursors = this.game.input.keyboard.createCursorKeys(); this.game.world.setBounds(0, 0, 9600,800); //MAP var map = this.game.add.tilemap('level1',9600,800,9600,800); map.addTilesetImage('bg-test'); this.hit = map.createLayer('hit'); this.start = map.createLayer('start'); this.bg = map.createLayer('bg'); //BALLOON this.balloon = new Phaser.Sprite(this.game, 192, 490, 'balloon'); this.balloon.debug = true; this.game.world.addAt(this.balloon, 3); this.game.physics.enable(this.balloon, Phaser.Physics.ARCADE); this.balloon.body.gravity.y = 15; this.balloon.body.collideWorldBounds = true; this.balloon.inputEnabled = true; this.game.camera.follow(this.balloon, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); this.balloon.animations.add('fly', [ 0, 1, 2, 3, 4, 5], 20, true); this.balloon.body.velocity.y = 10; // GAME map.setCollision([1,2,4,5],true,this.bg.index,true); map.setCollision([6],true,this.hit.index,true); map.setCollision([3],true,this.start.index,true); } }
  2. Hello there, I am relatively new to game development. I have defined a function ShowAds() within the html index file <script type="text/javascript"> var version = 'dev', libs = [ ]; var game = new StuddGames.AppBoot(); function ShowAds() { console.log("Show Ad"); } </script> is there a way i can call this function from typescript within the game code? Thanks for your help
  3. I'm stuck with loading my meshes. I'm new to all the 3D and modelling so any thoughts are highly appreciated. Basically I want to extends Babylons default Mesh class called BaseMesh and add a 'load' function to it to get rid of clutter in my scene code. I'm extending this BaseMesh class for each model I have. My BaseMesh class: (Note that all code examples are written in TypeScript) // BaseMesh.ts class BaseMesh /* extends BABLYON.Mesh */ { public readonly BASE_URL: string; // I want these to be static public readonly MODEL_URL: string; // I want these to be static public readonly NAME: string; // I want these to be static public body; /* constructor( scene ) { // I don't know what to do here super( this.NAME //name scene // scene null // parent ? // source ); } */ public load( assetsManager: BABYLON.AssetsManager ) { return assetsManager.addMeshTask( this.NAME + ' task', // name "", this.BASE_URL, this.MODEL_URL ); } public onLoaded( results ) { // I don't know what to do here this.body = results.loadedMeshes[0]; } public update(): void {} }; A model class would looks like this: // Robot.ts class Robot extends BaseMesh { public readonly BASE_URL: string = '/models/'; public readonly MODEL_URL: string = 'robot.babylon'; public readonly NAME: string = 'robotMesh'; public update(): void { this.body.rotation.y += 0.03; } } In my code above I store the loadedMesh from the AssetsManager into this.body. But here is question 1: why is my model already showing on the scene when the meshtask has run? I'm only loading a mesh, I've not put anything about putting it on the scene. Question 2: How do I extend my BaseMesh class from BABLYON.Mesh so that the result (loadedMeshes) of my load function is "the mesh itself" (instead of an attribute this.body). For example this would mean I could change my update function to 'this.rotation.y += 0.03;' and just generally makes more sense. Question 3: I'm really confused about the relationship between my "code" and my "model/.babylon files". Is there any good documentation/tutorials about this? These questions range from: - when is it healthy to split different parts of a model in different files - do I apply textures in my code or do I do that in my .babylon file - do I apply animations in my blender file or do I code them - ... This was a pain to type, if you have any questions please do ask Thank you in advance!
  4. Hello, guys. I'm trying to set up a workplace using CreateJS and Typescript. So far I tried only to use VisualStudio for this. I see everyone using the "createjs." namespace, can't find it in .d files from here: https://github.com/borisyankov/DefinitelyTyped Or is there another way of using Typescript with all the typing, intellisense and debugging?
  5. Hi, So, I've been following many tutorials but appear to be stuck at the first hurdle. I don't appear to be able to use the Debug Inspector if I'm using TypeScript and ES6 imports. I've setup my first scene using the initial tutorial (a sphere and a surface) on the website just fine using the TypeScript documentation (creating a Game class and so on). To do this in the ES6 way I import BabylonJS from node_modules by doing import * as BABYLON from 'babylonjs'; at the top of my .ts file and it works like a charm. Then I add this.scene.debugLayer.show(); to show the debug panel and I'm then faced with the following error in the Chrome debug console: babylon.inspector.bundle.js:408 Uncaught ReferenceError: BABYLON is not defined at INSPECTOR (babylon.inspector.bundle.js:408) at Object.t (babylon.inspector.bundle.js:408) at __webpack_require__ (babylon.inspector.bundle.js:21) at Object.<anonymous> (babylon.inspector.bundle.js:49) at __webpack_require__ (babylon.inspector.bundle.js:21) at babylon.inspector.bundle.js:41 at babylon.inspector.bundle.js:44 This is because it's absolutely right, the namespace BABYLON isn't included globally, my application is ES6, imports libraries where needed and then concatenates using Webpack. I moved to BabylonJS because it's dev team seemed to embrace TypeScript and ES6 but can't believe that something like this would have been overlooked? So that leads me to thinking I'm doing something wrong here. The only way I can see this working (which I found some libraries to do) is if the show() function to take the BABYLON object directly as an optional parameter, rather than expect for it to exist on the window (because it won't if you're importing ES6 style and webpacking). Open to thoughts and suggestions on this one as I'm new to BabylonJS. If I'm right with the above and it's just not something that has been done yet, I don't mind submitting a pull request.
  6. Hey all, just wondering if anyone could spare their knowledge on getting started with PIXI.js with Typescript I've made a couple of simple games now using PIXI.js and love it! Though really find javascript a pain to use as the games get bigger with all code being in 1 js file. What I want to start doing is making a library around PIXI.js for common things I will need (e.g. controls, grid layouts, etc) and build it up from there. Something so simple with UnityC# and even FlashAS3 that I always took for granted! I understand Typescript maybe the best way to do this, though am a little confused about the difference between all the options (Browserify, Babel, ES6, Typescript etc) what they all actually do what if any of those I will need, and what is the best way forward! Many thanks for any advice!
  7. A small simple multiplayer game https://github.com/code0wl/Multiplayer-Phaser-game There is also book that I have just published showing the steps to take to create such a game Preview: http://www.codeowl.tech:3000/
  8. Good evening all, My name is Christopher, and I have decided to use the Babylonjs npm repo. Question Once you include the babylonjs npm library through npm install how do you activate the extensions which are included? the attached file-structure.png shows the file-tree which is created in node_modules after using npm install. I am trying to use the included gui extension specifically. Environment Angular, Node, and Express, compiled using webpack Library npm babylon js To install the npm library into my project's node_modules: npm install --save babylonjs then my component has the import statement below: import * as BABYLON from 'babylonjs'; The above statement will utilize the babylon.module.d.ts file in the attached image and babylon.max.js This lets me use the BABYLON class with types perfectly as expected. However, none of the files in the gui folder in the attached image are hooked up. How would I go about activating this extension?? Solutions I've attempted thus far 0) just a normal import of the main babylonjs module: import * as BABYLON from 'babylonjs'; All core BABYLON methods and properties are accessible. However, BABYLON.GUI gives the following typescript error: "Property 'GUI' does not exist on 'typeof BABYLON'." Which is to be expected, since none of the gui files are hooked up. 1) using CDN for everything in index.html. <head> <!-- base href="/" is used for angular2 routing --> <base href="/"> <title>some website</title> <link id="favicon" rel="icon" href="public/assets/favicon.png"> <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script> <script src="https://preview.babylonjs.com/cannon.js"></script> <script src="https://preview.babylonjs.com/oimo.js"></script> <script src="https://preview.babylonjs.com/babylon.js"></script> <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> </head> This works, however, is not ideal, and defeats the purpose of the npm library. Also, the typescript definition files have to be maintained separate, either through the tsconfig.json, or in the component with a ///ref tag, and is very finecky. 2) using npm for babylon, and CDN for gui. Does not work, this method throws errors, because the CDN script tag in the head of index.html is compiled before the npm module, meaning the babylon class this extension extends does not exist at that time. 3) Using a second import to try to include the BABYLON.GUI class extension. import * as BABYLON from 'babylonjs'; import 'babylonjs/preview release/gui'; there is no .module file in the gui filepath so npm doesn't find anything there, so the second import fails. I've looked everywhere, including the docs and haven't found a clear solution. So how do we activate these extensions? They are included in the npm repo so naturally the devs want us to use them, and I'd love to take advantage of them
  9. I was trying to layout 3 columns of buttons. The buttons are GUI.Controls. Each column could be a GUI.StackPanel. As far as adding the 3 StackPanels to the texture you might add them to the GUI.AdvancedDynamicTexture using addControl(control :Control). No idea what would happen layout wise. Adding a StackPanel to an AdvancedDynamicTexture works though. If you were to do this in Typescript you would error GUI.StackPanel inherits from GUI.Container. GUI.Control is a root class. Should not the AdvancedDynamicTexture signature for add/removeControl be: public addControl(control: Control|Container): AdvancedDynamicTexture You might also add the 3 stackPanels in to a larger one with horizontal orientation. You could expect to know what would happen. Container.addControl seems to have the same problem, yet Control.AddHeader() does that.
  10. Hi, Phaser devs! I'm developing a game using Phaser with TypeScript and what I'm trying to achieve is this: var component:AwesomeComponent = actor.getComponent<AwesomeComponent>(); I know there's a workaround by constructing objects of type T. But I don't like it because I'd probably need to define tons of different constructors to represent all differents kinds of components. What I'm doing so far is passing a string with the type (of course a number would be better, but I'm still prototyping): getComponent<T>(componentType:string): T { for (let i = 0; i < this.components.length; i++) { if (componentType == this.components[i].componentType) { return <T><any>this.components[i]; } } return undefined; } It works, but the result is not good, you have to type the class name twice: var animComp = actor.getComponent<AnimationComponent>("AnimationComponent"); Any suggestions on how to solve it? I know there`s a way to do it, because Unity does exactly that in JavaScript. Thank you for your time!
  11. Hi, I'm coming from AS3/Flash background, currently researching possibilities of HTML/WebGL development. For the past week I've been trying out various approaches to js, ended up focusing on Typescript. I'm currently struggling to pick and setup an IDE. Currently I'm using Visual Studio Express, however it lacks essential functions like code generation and templates. What is your ts IDE of choice? What are some tools/configuration tips you use to make the development easier? thanks, kihu
  12. I've got an issue with phaser and Typescript where my classes that extend Phaser classes aren't recognizing the Phaser class fields. I posted a pretty detailed stackoverflow question about it, but was wondering if anyone on here might have a suggestion. Feel free to reply here or there. Here's the details: https://stackoverflow.com/questions/45091893/cannot-access-base-class-properties-in-typescript/45100163#45100163
  13. Hi, I would like to develop a game in Babylon but I would like to use typescript. Is there any 'getting started' guide? ( as i wasn't able to find any). If there isn't, can I please be pointed in the right direction as to how to go about doing this? If I get responses, I would be happy to submit a tutorial to assist others. Also, is there a way where one can provide/submit tutorials? Thanks, bws.
  14. Hi, I'm getting some really odd issues when I am trying to extend Babylon JS objects. Example: class Scene extends BABYLON.Scene { } class Game { public engine: BABYLON.Engine; public currentScene: Scene = null; } Mesh = BABYLON.Mesh.CreateGround("newGround", 1000, 1000, 1, newGame.currentScene); Gives me the following errors: (9,69): error TS2345: Argument of type 'Scene' is not assignable to parameter of type 'BABYLON.Scene'. Property '_environmentTexture' is protected but type 'Scene' is not a class derived from 'Scene'. Is this something that is not supported? Weird thing is I had this working and then suddenly it stopped.. Thanks! -StarToaster
  15. I'm trying to crop a Phaser.Text, so I can make something similar to the As3 TextField class (where your text is inside of a mask). But the crop method is not working, here is what I did: this.pText = new Phaser.Text(this.game, 0, 0, text, style); this.pText.crop(new Phaser.Rectangle(0, 0, 20, 20), true); this.pText.updateCrop();
  16. I am wondering why the renderer.backgroundColor property is not public in TypeScript. In order to get directly access to this useful property, I needed to create a helper class to expose this attribute: class GameRenderer extends PIXI.WebGLRenderer { public backgroundColor: number; } If anyone has an explanation, I would be interested to read it. Thanks!
  17. Hello I use PHPStorm or Webstorm for most projects I do (mostly PHP). I want to try BabylonJS in combination with that software. I follow the tutorial, put an index.html and babylon.2.5.js in the same folder, reference it in a script tag, working like a charm. PHPstorm hints to classes and functions, very cool. But when I want to fill in parameters, I see this: It's something, but not very much. I suspect this is because the babylon.2.5.js file is transpiled from TypeScript. I figured I want to work in TypeScript because that language is nicer imho than Javascript. So again, followed the tutorial. added the d.ts file to my PHPstorm project. That doesn't work at all because PHPStorm cannot find any reference to the BABYLON namespace. So I tried something else, added babylonjs as an external library (apperently someone made that for PHPStorm) but the effect is the same. Is anybody working here with PHPStorm (or webstorm) + TS + BabylonJS and willing to get me started? Thanks!
  18. Hi, Someone have tried to use LegacyPbrMaterial with webpack? I copied file babylon.legacyPbrMaterial.min.js and made import in project (import "babylonjs/babylon.legacyPbrMaterial") but after that I get error Uncaught ReferenceError: __extends is not defined at babylon.legacyPbrMaterial.js:1 at BABYLON (babylon.legacyPbrMaterial.js:1) at Object.exports.byteLength (babylon.legacyPbrMaterial.js:2) at __webpack_require__ (bootstrap 3ce2b0a…:19) I have same erro if i try ti use inpsector. I am missing some config for webpack or typescript?
  19. Hey everyone, Was wondering myself how to set up a TypeScript multiplayer game project which utilises phaser. So I made a book and a free github repo for those who are interested in looking at my approach. https://github.com/code0wl/Multiplayer-Phaser-game Feedback and comments are always awesome!
  20. Hello I want to run Getting Started Example in TypeScript on JSFiddle: https://jsfiddle.net/8Observer8/z4vo5u5d/68/ But an error occurs on the line 50 "this._scene.render();" Thank you in advance
  21. Hello, I cannot find an answer by google. Maybe do you know how to solve this problem or what does it mean this message in the console: Live Demo /// <reference path="../babylon.d.ts" /> namespace MATERIALS { export class Basics { /* * Public members */ /* * Private members */ private _canvas: HTMLCanvasElement; private _engine: BABYLON.Engine; private _scene: BABYLON.Scene; private _camera: BABYLON.ArcRotateCamera; private _light: BABYLON.PointLight; constructor(canvas: HTMLCanvasElement) { // Engine this._engine = new BABYLON.Engine(canvas); // Scene this._scene = new BABYLON.Scene(this._engine); this._scene.fogEnabled = true; // Fog is enabled in the scene this._scene.fogMode = BABYLON.Scene.FOGMODE_EXP; // Linear fog this._scene.fogColor = new BABYLON.Color3(1, 1, 1); // White this._scene.fogDensity = 0.005; // Camera this._camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 150, BABYLON.Vector3.Zero(), this._scene); this._camera.attachControl(canvas); // Light this._light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), this._scene); this._light.intensity = 1; } /** * Runs the engine render loop */ public runRenderLoop(): void { this._engine.runRenderLoop(() => { this._scene.render(); }); } /** * Creates a scene with a plane and 6 spheres */ public createScene(): void { /** * Meshes */ // Plane var plane = this._createPlane(); // Spheres var spheres = this._createSpheres(); // Skybox var skybox = this._createSkybox(); /** * Mirror texture */ // Mirror texture var mirrorTexture = new BABYLON.MirrorTexture("mirrorTexture", 1024, this._scene); mirrorTexture.mirrorPlane = BABYLON.Plane.FromPositionAndNormal(new BABYLON.Vector3(0, -5, 0), new BABYLON.Vector3(0, -1, 0)); // Set meshes and remove plane + skybox for (var i = 0; i < spheres.length; i++) { mirrorTexture.renderList.push(spheres[i]); } // Apply mirror texture (<BABYLON.StandardMaterial>plane.material).reflectionTexture = mirrorTexture; } /** * Creates a plane with a normal map texture */ private _createPlane(): BABYLON.Mesh { var material = new BABYLON.StandardMaterial("planeMaterial", this._scene); material.diffuseTexture = this._configureTexture(new BABYLON.Texture("floor_diffuse.PNG", this._scene)); material.bumpTexture = this._configureTexture(new BABYLON.Texture("floor_bump.PNG", this._scene)); material.fogEnabled = false; var plane = BABYLON.Mesh.CreatePlane("plane", 150, this._scene); plane.material = material; plane.position.y -= 5; plane.rotation.x = Math.PI / 2; return plane; } /** * Creates 7 spheres with different materials */ private _createSpheres(): BABYLON.Mesh[] { var spheres: BABYLON.Mesh[] = []; var initialX = 70; for (var i = 0; i < 7; i++) { var sphere = BABYLON.Mesh.CreateSphere("sphere" + i, 10, 9, this._scene); sphere.position.x = (initialX -= 15); sphere.material = new BABYLON.StandardMaterial("sphereMaterial" + i, this._scene); (<BABYLON.StandardMaterial>sphere.material).fogEnabled = true; spheres.push(sphere); } // Material 1 (diffuse color) var material1 = <BABYLON.StandardMaterial>spheres[0].material; material1.diffuseColor = new BABYLON.Color3(1, 0, 0); // Material 2 (Texture with alpha) var material2 = <BABYLON.StandardMaterial>spheres[1].material; material2.diffuseTexture = new BABYLON.Texture("cloud.png", this._scene); material2.diffuseTexture.hasAlpha = true; // Material 3 (Alpha) var material3 = <BABYLON.StandardMaterial>spheres[2].material; material3.specularColor = new BABYLON.Color3(0, 1, 0); material3.specularPower = 10; material3.useSpecularOverAlpha = true; material3.alpha = 0.5; // Mateiral 4 (back face culling) var material4 = <BABYLON.StandardMaterial>spheres[3].material; material4.diffuseTexture = material2.diffuseTexture; material4.backFaceCulling = false; // Material 5 (textures repeat) var material5 = <BABYLON.StandardMaterial>spheres[4].material; material5.diffuseTexture = this._configureTexture(new BABYLON.Texture("cloud.png", this._scene)); material5.diffuseTexture.hasAlpha = true; // Material 6 (texture) var material6 = <BABYLON.StandardMaterial>spheres[5].material; material6.diffuseTexture = new BABYLON.Texture("floor_ao.PNG", this._scene); // Material 7 (share the same material as the plane) spheres[6].material = this._scene.getMeshByName("plane").material; return spheres; } private _createSkybox(): BABYLON.Mesh { var material = new BABYLON.StandardMaterial("skyboxMaterial", this._scene); material.reflectionTexture = new BABYLON.CubeTexture("skybox/TropicalSunnyDay", this._scene); material.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; material.backFaceCulling = false; material.fogEnabled = false; var skybox = BABYLON.Mesh.CreateBox("skybox", 300, this._scene); skybox.material = material; return skybox; } /* * Configures a given texture * Changes the uv scaling */ private _configureTexture(texture: BABYLON.Texture): BABYLON.Texture { texture.vScale = texture.uScale = 5; return texture; } } window.onload = () => { let canvas = <HTMLCanvasElement>document.getElementById("renderCanvas"); let materials = new Basics(canvas); materials.createScene(); materials.runRenderLoop(); } }
  22. Hello, How do you think why the attachControl doesn't work in this code? /// <reference path="../babylon.d.ts" /> namespace LOADING { export class LoadScene { /* * Public members */ public camera: BABYLON.ArcRotateCamera; public light: BABYLON.PointLight; /* * Private members */ private _canvas: HTMLCanvasElement; private _engine: BABYLON.Engine; private _scene: BABYLON.Scene; constructor(canvas: HTMLCanvasElement) { // Engine this._engine = new BABYLON.Engine(canvas); // Scene this._scene = new BABYLON.Scene(this._engine); // Camera this.camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 30, BABYLON.Vector3.Zero(), this._scene); this.camera.attachControl(canvas, true); // Light this.light = new BABYLON.PointLight("light", new BABYLON.Vector3(20, 20, 20), this._scene); this.light.diffuse = new BABYLON.Color3(0, 1, 0); this.light.specular = new BABYLON.Color3(1, 0, 1); this.light.intensity = 1.0; /** * Load an exported scene * This static method contains 6 parameters * 1: the directory of the scene file * 2: the scene file name * 3: the Babylon.js engine * 4: a success callback, providing the new scene created by the loader * 5: progress callback, empty as default (can be null) * 6: error callback, providing the new scene created by the loader */ BABYLON.SceneLoader.Load("./", "awesome_scene.babylon", this._engine, (scene: BABYLON.Scene) => { // Success callblack this._scene = scene; // We can now access the scene.meshes array etc. // Decal the meshes to 10 units on X for (var i = 0; i < this._scene.meshes.length; i++) { console.log(this._scene.meshes[i].name); this._scene.meshes[i].position.addInPlace(new BABYLON.Vector3(10, 0, 0)); } // Just append the same scene this._appendScene(); }, () => { // Progress callback // Do something with your web page :) }, (scene: BABYLON.Scene) => { // Error callback }); } /* * Use graphs.The new parent of the light is the camera. * Then, the light's position will be the same as the camera */ public setCameraParentOfLight(): void { this.light.position = BABYLON.Vector3.Zero(); this.light.parent = this.camera; } /** * Runs the engine render loop */ public runRenderLoop(): void { this._engine.runRenderLoop(() => { this._scene.render(); }); } /** * This method appends new scene with the already existing scene * Here, we are appending the same scene at its original position */ private _appendScene(): void { BABYLON.SceneLoader.Append("./", "awesome_scene.babylon", this._scene, (scene: BABYLON.Scene) => { // Do something you want }, () => { // Progress }, (scene: BABYLON.Scene) => { // Error }); } /** * Import the skull mesh (available in the Babylon.js examples) * This methods imports meshes and only meshes. */ private _importMesh(): void { BABYLON.SceneLoader.ImportMesh("", "./", "skull.babylon", this._scene, (meshes, particles, skeletons) => { // Success callback // Here, meshes contains only one mesh: the skull (meshes[0]) // Particles array is empty // skeletons array is empty }, () => { // Progress callback }, (scene: BABYLON.Scene, e: any) => { // Do something console.log(e.message); }); } } window.onload = () => { let canvas = <HTMLCanvasElement>document.getElementById("renderCanvas"); let scene = new LoadScene(canvas); scene.runRenderLoop(); scene.setCameraParentOfLight(); } }
  23. Hi all, I am here to present Relic : Tale of the Undead Princess, a retro 2D action-adventure game. On the menu : Greenlight, trailers, playable demo and upcoming release ! OVERVIEW The princess is dead... But she is back ! The last hope against evil forces. Help her explore the realm and succeed where all heroes have failed. Relic : Tale of the Undead Princess is a retro 2D action-adventure game, with a fine blend of exploration, puzzles, secrets and challenges ! GREENLIGHT Support the Princess on Steam > Relic on Greenlight < I am not asking for "likes" it, but if you enjoy the concept and gameplay, a little help is always welcome. Thanks More resources on the Steam Greenlight page : trailer, screenshots, features and playable demos. DEVELOPMENT I work alone and I handle the programming, production, game design, level design, QA and misc art assets ; for everything else (main tilesheets, sprites, music) I license asset packs from artists and asset stores. Full detailed credits in the game. - Estimated play time : 8~12h, depending on player experience and game completion - Game size : ~200 playable screens - Team : myself ! - Development time : ~1 year, from scratch - Platforms : Windows 7/8/10, Linux (tested on Ubuntu 16.04 LTS) - Release date : TBC ~ Spring 2017 TOOLS - Tech : The game is developed in TypeScript, using VSCode and SmartGit. It is using the Phaser engine, in its latest pre-CE version, 2.6.2. On top of which I add my own gameplay framework, a json data-driven Entity-Component-System architecture. - Art & design : I'm using Pyxel for misc pixel art and Tiled for the level design. - Production : handled with Trello and Toggl, plus a collection of ad-hoc prod assets. - Shipping : The application is packaged with NW.js to deploy as a desktop executable. Thanks for reading - I hope you will enjoy Relic : Tale of the Undead Princess !
  24. Hello, I need to add some 3d functionality to an existing project. That project is based on lastest PIXI build (so I can't use PIXI fork by ivan.popelyshev), and I decided to write a plugin that offers flat sprites in 3d space. On my PC (in Google Chrome) it works quite well, but when I'm testing it on Asus Zenfone 2 (also in Google Chrome) the FPS is very low, especially when my 3d objects are moving and rotating. The performance is bad even with quite a few objects (~25 visible objects and some invisible 3d containers). I added some optimizations, but it wouldn't help. Could you please tell me what can cause that performance issues? I attached plugin source code to the post. Thanks in advance for answer. P.S. Is there any new information about 3d support in PIXI itself (PIXI flip)? And is it possible to use another framework that supports 3d, along with existing project based on PIXI? plugin3d.zip
  25. This past weekend, I took a break from working on another game I'm working on called Space Pizzas (here's the forum post) to try out a couple web development technologies I hadn’t previously used: GlimmerJS and TypeScript. If you're not familiar with Glimmer, it is a component library (like React) with quite a bit more tooling (like Ember). And if you're not familiar with TypeScript, it is superset of JavaScript that adds a type system in the hopes of making big applications less fraught with peril than your typical big JavaScript app.Using the above technologies, I made a game called Croissant Hoops in the vein of Qwiboo’s Ball King. The idea of the game is to use the mouse or touch to drag an arc that will place the basketball into the hoop. I also added a slider that changes the games gravity (I mostly did this to try out the property bindings in Glimmer).The game can be played at hoops.spacepizzas.com.Here’s a GIF of Croissant Hoops: In case anyone is interested, I put the source code on GitHub. The game is made directly on an HTML <canvas>. If I were going to go any further with this game, I'd probably use a framework like Phaser, but I think I'll probably leave the game as it is for now.