Jump to content

Search the Community

Showing results for tags 'typescipt'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 10 results

  1. Hello everyone. These days I found myself starting my new project with Phaser and I was looking for a template that included both Typescript and Electron, but around the net there was nothing that fully satisfied me. So I thought of creating a starter that would allow me to have both the ability to build the project on the web browser and in desktop app format with Electron. And so, today, I present my starter template: https://github.com/waliente/phaser-typescript-electron I hope it will be useful to you too
  2. Become a part of our unique success story! More than 500 million people have already played our next-gen instant games. Join us and unleash your superpowers to build the future of gaming! SOFTGAMES is looking for a JavaScript Game Developer to help us bring our games to new Instant Game Platforms that will entertain tens of millions of people every month. The JavaScript Game Developer designs, architects, tests and implements features into our live games. Further you'll work on bringing our games to existing and upcoming Instant Game Platforms. You will collaborate with producers, artists and other game developers to share learnings and best practices. The JavaScript Game Developer will ship robust and high-performance code, be passionate, and act as a fount of knowledge when it comes to game development. As part of a small, experienced and dynamic team you will enjoy a creative, challenging and collaborative environment. You can either work REMOTELY or in our central Berlin office surrounded by a great bunch of people! **Qualified applicants will be expected to complete a technical assessment. Your role: Write robust code to be used by millions of users Maintain and optimise features of existing Instant Games Develop and integrate different platform SDKs Independently create complete solutions from scratch Work on schedule, set clear goals Share knowledge and help colleagues Your profile: Great passion for games! 3+ years of professional software engineering experience Strong knowledge and experience with JavaScript (HTML5) Knowledge of TypeScript or another language with static typing Profiling and optimising JavaScript/TypeScript code Node.js CI/CD Experience with build systems (e.g. Webpack or gulp), PixiJS, Phaser Shipped at least 2 mobile/social title, preferably on multiple platforms Ability to quickly get up to speed with existing code Deliver high-quality and well-structured code Open-minded and keen to learn What we offer: We have a flexible working setup - either fully remote or on-site in central Berlin. Your choice! Working and living in Germany has many advantages as e.g. a high job security, great work-life balance and one of the best universal health care systems in the world! Further our Berlin full time employees benefit from: Visa: Our visa assistance service guides you through the whole process and helps with tips and tricks to get the approvals and your visa as fast as possible. Relocation Support: We support your move to Berlin with e.g. flat hunting, paper work like local registration, setting up bank accounts etc. Language classes: We pay your German lessons so you can order food auf deutsch very fast and go right up to perfecting your business vocabulary. Further training: A personal learning budget to spend on learning and development, including books, workshops, etc. Flexible working hours and home office: Productive hours differ individually. That’s why you're welcome to show up in the office whenever you're ready for it. Need to watch the kids or wait for a handicraftsman? No problem - we also offer the opportunity for home office. Office: A super modern office with state of the art tech, based in the center of Berlin, quickly to reach from all destinations thanks to the excellent public transport connections. Equipment: Choose between a MacBook Pro or Windows Laptop. Furthermore our office features the latest projectors, cameras, testing devices, monitors - you name it. Fresh fruits, snacks and drinks: Enjoy fresh fruits, free coffee and a fully stocked fridge with cold Water, Juices, Coke, Club Mate, Beer etc. For the sweet-toothed we have snacks, chocolate and chips of course. Epic company parties: Regular company parties to celebrate, including Summer Party, Oktoberfest, Christmas Party. Team events: We have regular Casual Fridays, Board Game Nights, Pub Quizzes, Team lunches, Company breakfasts and much more … Team spirit: Beyond our amazing parties and company events, the team further organizes activities themselves such as playing soccer together, a cooking group, a Japanese learning group, and much more. About SOFTGAMES With offices in Berlin (HQ) and Toronto, SOFTGAMES is an instant gaming company. We develop casual, truly social games that can be played instantly across all devices. We partner closely with Facebook, Samsung and more to craft the next generation of instant games that billions of people can play together. To-date, more than 500 MM people have played our games on Facebook, including Cookie Land, Solitaire Story Tripeaks, Mahjong Story, Space Invaders, Fish Story, Bubble Shooter or Candy Rain. At SOFTGAMES, we believe that different perspectives and background in our teams contribute to the quality of our work. We value diversity and therefore welcome all applications - regardless of gender, nationality, ethnic and social origin, religion / worldview, disability, age as well as sexual orientation and identity. Have we caught your interest? Then we look forward to your detailed application together with your salary expectations and earliest possible start date.
  3. I am trying to do something very simple with PIXI and Typescript. I decided to switch to using texture packer from loading individual png files and ran into this issue. The issue is when trying to access the texture that is loaded through the spritesheet json file I get a promise error. The code is very simple and I have tried various ways of doing this with no luck. This example is the simplest and uses the example from CodeAndWeb (Texture packer devs site) but in an attempt to translate it to typescript and separated the functionality a bit. Any advice is highly appreciated. Thanks. import { Container, Sprite, Graphics, Texture, Spritesheet } from "pixi.js"; import * as PIXI from "pixi.js"; // This example is based on the following // https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5 export class Game extends Container { static GAME_WIDTH = 320; static GAME_HEIGHT = 568; private static _instance: Game; public app: PIXI.Application | undefined; constructor() { super(); window.onload = (): void => { this.createRenderer(); this.addAssets(); this.startLoadingAssets(); }; console.log('Game Constructed'); } public static getInstance(): Game { if (!Game._instance) { Game._instance = new Game(); } return Game._instance; } private addAssets(): void { PIXI.Loader.shared.add('game', '../assets/game.json'); console.log('Assets added'); } private startLoadingAssets(): void { PIXI.Loader.shared.onComplete.add(() => { this.onAssetsLoaded(); }); // PIXI.Loader.shared.onComplete.add(this.onAssetsLoaded); PIXI.Loader.shared.load(); console.log('Loading assets'); } private onAssetsLoaded(): void { let sprite = new PIXI.Sprite(PIXI.Texture.from("backBoard.png")); // let sheet = PIXI.Loader.shared.resources["../assets/game.json"]; // let sprite = new PIXI.Sprite(sheet.texture['backBoard,png']); // this.app?.stage.addChild(sprite); console.log('AssetsLoaded'); } private createRenderer(): void { this.app = new PIXI.Application({ backgroundColor: 0x001320, }) document.body.appendChild(this.app.view); console.log('Renderer Created'); } public initialize(): void { console.log('Game initialized'); } } json looks like this {"frames": { "backBoard.png": { "frame": {"x":1,"y":1,"w":318,"h":442}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":318,"h":442}, "sourceSize": {"w":318,"h":442} }, "buttonDisabled.png": { "frame": {"x":321,"y":340,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonDown.png": { "frame": {"x":353,"y":344,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonSmallDisabled.png": { "frame": {"x":395,"y":224,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallDown.png": { "frame": {"x":395,"y":248,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallUp.png": { "frame": {"x":395,"y":272,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonUp.png": { "frame": {"x":321,"y":372,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "coin.png": { "frame": {"x":368,"y":311,"w":31,"h":33}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":31,"h":33}, "sourceSize": {"w":31,"h":33} }, "logo.png": { "frame": {"x":321,"y":213,"w":125,"h":45}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":125,"h":45}, "sourceSize": {"w":125,"h":45} }, "meter_big.png": { "frame": {"x":321,"y":100,"w":92,"h":47}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":92,"h":47}, "sourceSize": {"w":92,"h":47} }, "meter_small.png": { "frame": {"x":368,"y":213,"w":43,"h":25}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":43,"h":25}, "sourceSize": {"w":43,"h":25} }, "meterDisplay.png": { "frame": {"x":321,"y":149,"w":89,"h":49}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":89,"h":49}, "sourceSize": {"w":89,"h":49} }, "meterDisplayBig.png": { "frame": {"x":321,"y":1,"w":97,"h":97}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":97,"h":97}, "sourceSize": {"w":97,"h":97} }, "meterMinus.png": { "frame": {"x":368,"y":258,"w":25,"h":25}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":25,"h":25}, "sourceSize": {"w":25,"h":25} }, "meterPlus.png": { "frame": {"x":368,"y":285,"w":24,"h":24}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":24,"h":24}, "sourceSize": {"w":24,"h":24} }, "peg.png": { "frame": {"x":399,"y":200,"w":11,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":22}, "sourceSize": {"w":11,"h":22} }, "target_guide.png": { "frame": {"x":321,"y":200,"w":11,"h":76}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":76}, "sourceSize": {"w":11,"h":76} }}, "meta": { "app": "https://www.codeandweb.com/texturepacker", "version": "1.0", "image": "cheenko.png", "format": "RGBA8888", "size": {"w":419,"h":444}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:507f67780e7f85c65d491493063f25f9:181b9d624fffd3a88b16c67d21e19ad7:3dbd62212b1a89304e8d06008f40f33d$" } } Code Sandbox link https://codesandbox.io/s/empty-hooks-9g8j6?file=/src/index.ts
  4. Hello Everyone, I'm primarly a .Net Developer(c# backend), and not so long ago i started a new project. I choise as rendering engine technology pixijs v6.0 (latest version) I'm quite new to pixijs and typescript and stubled upon a stange error. This error is that a sprite/texture not gets loaded/displayed to the screen.. Why this occuers i have no clue... If i create a simple unstructed project i can load textures fine,but in my structerd program nothing gets displated.. If i add a text object for example i have no issues... nor with drawing rectangles. I Really really hope someone can help me, scavanged the internet for a while now to find a sollution. Regards Me #Index Typescript File -> import * as PIXI from 'pixi.js'; import { Engine } from './Engine/Engine'; //Gobal Variale //declare const window: any; declare global { interface Window { app: any; Display: any; } } export class Game extends Engine { static instance: Game; //private _currentScene?: IScene; public lang: string; //public games: { [key: string]: IScene }; _init: boolean; constructor(parent: HTMLElement) { if (!parent) throw new Error("aprent element must be div!"); const aspect = window.innerWidth / window.innerHeight; //l size = { ...Config.ReferenceSize }; //fallback PIXI.settings.PREFER_ENV = PIXI.ENV.WEBGL; super({ autoStart: true, backgroundColor: 0xFF00FF, width: 1200, height: 1200 //...size }); parent.appendChild(this.view); this.render(); // renders the world //@ts-ignore Game.instance = this; PIXI.utils.sayHello; } } //Hooks.. window.Display = () => { const app = (window.app = new Game(document.querySelector("#gameid"))); }; #Engine TypeScript File -> import * as PIXI from "pixi.js"; import { IEngineOptions } from './Classes/Interfaces/IEngineOptions'; import { IEngine } from './Classes/Interfaces/IEngine'; export class Engine extends PIXI.utils.EventEmitter implements IEngine { public renderer: PIXI.Renderer; public ticker: PIXI.Ticker = new PIXI.Ticker(); public loader: PIXI.Loader = PIXI.Loader.shared public world: PIXI.Container = new PIXI.Container(); public init: Function; constructor(options: IEngineOptions) { super(); this.renderer = new PIXI.Renderer(options); // good this.init = () => { }; } get view(): HTMLCanvasElement { return this.renderer.view; } render() { const testGraphic = new PIXI.Graphics(); testGraphic.beginFill(0xFFFF00); testGraphic.lineStyle(5, 0xFF0000); testGraphic.drawRect(0, 0, 300, 200); let x = new PIXI.Text('This is a PixiJS text', { fontFamily: 'Arial', fontSize: 24, fill: 0xFFFFFF, align: 'center' }); x.position.x = 5; x.position.y = 250; <b>// Not Working and asset exist..</b> let background = PIXI.Sprite.from('./Assets/UIElements/ribbonBackground.JPG') background.position.x = 0; background.position.y = 0; this.world.addChild(testGraphic, x, background); this.renderer.render(this.world); } destory(params = { children: false }) { this.world.destroy(params); this.ticker.destroy(); this.renderer.destroy(true); } } //} // Engine
  5. My question is how can we separate portrait and landscape mode by designing differently in my mobile view? For example Portrait mode ui and landscape ui is I want it to be different from each other. Thanks
  6. Hello all - I have started working on my first browser-based game and I got the Phaser framework set up with Angular and Electron for this, as I'm super comfortable with Angular and enjoy playing with typescript. I started to build it and realized that getting these frameworks to play well together can be a pain for a lot of people, so I stripped back the content and posted the template in a repo on GitHub. I just thought I'd share and get the word out, and I've had decent traffic from subreddits. I'm hopeful if it gets enough use and some forks, that the implementation might be worked and improved upon. Let me know what you think, or if you have any questions about it: https://github.com/TBosak/game-template
  7. About the role A Game Developer at Roxor/Playsafe plays a crucial part of the creation of our awesome games. You will be working in a team that is responsible for taking the game from a concept stage to a finished game, optimized for both desktop and mobile devices. Not only will you write structured, testable quality code but you will also support our graphics and FX artists with implementing and coding art and graphical effects. We work in small agile teams consisting of a game designer, sound designer, producer, QA, artists and of course game developers. We believe that working closely in small team is crucial in creating the best games and it helps us in an agile way to take faster and better decisions. We develop our games in Javascript and TypeScript. They are rendered with the PIXI engine in WebGl and Canvas. To give the players the best experience, we put a lot of effort in optimizing our games for all platforms, both regarding file size and performance. We work in an ambitious, casual and fun atmosphere where we take a lot of pride in the games we create. Your Tasks ⦁ Participation in the design process for new features in the new games framework ⦁ Implementing new features in the new games framework ⦁ Implementing new games in games framework ⦁ Code Reviews of new features implemented by other developers Qualifications and Experience ⦁ +2 years of prior experience of software development as employee or contractor ⦁ Experience working with graphically performance-heavy web applications and games ⦁ Working experience with JavaScript, ActionScript, TypeScript, or similar ⦁ Working experience with any JavaScript based game engines, like PIXI, Phaser or similar ⦁ Interest in computer graphics programming, animations and effects ⦁ Good communication skills to explain technical requirements to the game designer and producer ⦁ Experience with client-server integrations ⦁ Understanding of good practice version control, artefact versioning, branching model ⦁ The ability to deliver in an agile, iterative environment where pace is high and all voices matter We also value ⦁ Experience with hardware-accelerated 3D techniques ⦁ Experience working with TDD and automated testing techniques ⦁ Any other creative skill, from sound design to 3D modeling Who are you and what do we offer We are seeking a social, positive, and driven person who can help us create the best video slots on the market. You are a team player with strong initiative and self-motivation thriving in a small team environment where the route from idea to implementation is very short. You should be collaborative, fun to work with and be able to augment our design process with great animation instincts and a firm grasp of the best tools for building cross platform experiences for the modern web. If your interested in the position please feel free to notify me at [email protected] We are based in Cape Town, South Africa. GameDeveloperRole - Job Description.docx
  8. there seems to be something wrong with the code, one button has to slow down and one button to speed up when I add this code, this.downButton = this.add.image(80, 530, 'up-bubble').setInteractive(); this.upButton = this.add.image(230, 530, 'down-bubble').setInteractive(); this.input.on('gameobjectup', function (pointer, gameobject) { if (gameobject === this.downButton && this.spinSpeed > 0) { this.spinSpeed -= 0.1; } else if (gameobject === this.upButton && this.spinSpeed < 9.9) { this.spinSpeed += 0.1; } }); but, when I add this code between generateBalls (), it doesn't work at all, it doesn't work, generateBalls() { const hitArea = new Phaser.Geom.Rectangle(0, 0, 32, 32); const hitAreaCallback = Phaser.Geom.Rectangle.Contains; const circle = new Phaser.Geom.Circle(400, 300, 220); const balls = this.add.group(null, { key: 'balls', frame: [0, 1, 5], repeat: 5, setScale: { x: 3, y: 3 }, hitArea: hitArea, hitAreaCallback: hitAreaCallback, }); this.downButton = this.add.image(80, 530, 'up-bubble').setInteractive(); this.upButton = this.add.image(230, 530, 'down-bubble').setInteractive(); this.input.on('gameobjectup', function (pointer, gameobject) { if (gameobject === this.downButton && this.spinSpeed > 0) { this.spinSpeed -= 0.1; } else if (gameobject === this.upButton && this.spinSpeed < 9.9) { this.spinSpeed += 0.1; } }); Phaser.Actions.PlaceOnCircle( balls.getChildren(), circle); return balls; } generateDance() { this.spinSpeed = 0.003; return this.tweens.addCounter({ from: 220, to: 160, duration: 9000, delay: 2000, ease: 'Sine.easeInOut', repeat: -1, yoyo: true }); } update() { this.playerEyes.update(); Phaser.Actions.RotateAroundDistance( this.balls.getChildren(), { x: 400, y: 300 }, this.spinSpeed, this.dance.getValue()); } I took the code from the Phaser 3 example this is https://phaser.io/examples/v3/view/tweens/tween-time-scale
  9. Unfold is looking for a “Senior Game Developer HTML5 / TypeScript” in Berlin. https://www.unfold.net/senior-game-developer-html5-typescript-berlin/ Unfold is a German game developing studio. We develop video slot games for the free-to-play & the online gambling market on multiple platforms. Unfold started as a pioneer in social betting. Founded in 2009, we were backed by premier venture capital firms Earlybird and Target Partners. In 2012 we became part of a leading family-owned European casino group. We are now a wholly owned subsidiary of Bally Wulff, one of Germany’s leading manufacturers of electronic gaming machines. Unfold is based in Berlin, Germany, Europe’s gaming hub. To lead the growth of our gaming portfolio we are looking for a “Senior Game Developer HTML5 / TypeScript”. Your Profile: Solid knowledge in TypeScript / JavaScript (OOP), HTML5 & CSS3 You enjoy an object oriented programming style You have working experience with PixiJS Understanding of separation of concerns, design patterns & testing Ability to deliver high-quality, clean code using agile, test driven development practices Aptitude for learning and sharing knowledge / skills, pair programming & code reviews You are a teamplayer and reliable English full professional proficiency, German is a big plus We are looking for someone who is a very versatile professional with a creative mindset, good logical and analytical capabilities, you think from a user’s point of view and you have the ability to prioritize & multi-task. Technologies & Tools we are using: TypeScript, JavaScript, PixiJS, Webpack, Node.js, Selenium, Maven, Jenkins, Git & IntelliJ. This is an excerpt – we adapt our technologies to the conditions and choose others if we think they are more useful. Your Benefits: Build state-of-the-art tech products Be part of a small but growing, highly skilled team developing the next generation of online games No hierarchies and quick decision making processes The best development hardware & software money can buy Attending conferences & trainings 28 days of vacation, very flexible and family friendly working conditions, home office days and no over hours Comfortable working place with free fruit & drinks Cookie driven development and team events How to apply? Please call or send your application to: jobs (at) unfold.net Unfold Gaming Digital GmbH Ramona Döbrich (HR) Colditzstr. 34/36 12099 Berlin, Germany It would be nice if you could add a link to Github/BitBucket and LinkedIn in your CV. Tel.: +49 (0)30 417 212 80 Fax: +49 (0)30 417 212 81
  10. Hi, is there any technique to use Typescript babylon.js sources in testing environment of application? I need to do some additions and changes to engine ( usecase specific ). My app is written in Typescript and i would like to "import" babylon.ts sources to be able to debug babylon.ts sources. Is there any solution for visual studio to use babylon.ts in my app? I am using VS2013 Thanks for reply.
  • Create New...