renathy

Members
  • Content Count

    8
  • Joined

  • Last visited

About renathy

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I have started already developing my game with Pixi.JS. However, I suddenly found library fabric.js. I am developing simple DragAndDrop "Game" for small kids. They need to drag and drop objects on main screen and write their names. Almost that is it... THere are about 50 different objects in different categories, all objects are images. I see there is a lot of features I need in Fabric.js DEMOS, but in PIXI.js I have to develop them by myself: 1) I need to drag and drop objects on my main scene 2) I need to rotate and resize them 3) I need to have selection of those objects (and fabric.js has already rectangle around each object as selected object and allows to rotate and resize those objects) 4) Writing text on canvas 5) Draing lines on canvas (in Fabric.js - there are DEMOs like this) Basically this is what I need. All other things are just javascript and would be common for both libraries. What are PIXI.JS benefits over Fabric.js?
  2. I have installed Pixi.TextInput (https://github.com/Mwni/PIXI.TextInput). npm install pixi-text-input It seems that it doesn't contain Types definitions for typescript. And when I am trying to use it, it gives me errors. In my index.ts I am importing it and I am trying to use it like this: import TextInput from 'pixi-text-input'; ... var input = new TextInput({ input: { fontSize: '25pt', padding: '14px', width: '500px', color: '#26272E' }, box: {default: {fill: 0xE8E9F3, rounded: 16, stroke: {color: 0xCBCEE0, width: 4}}, focused: {fill: 0xE1E3EE, rounded: 16, stroke: {color: 0xABAFC6, width: 4}}, disabled: {fill: 0xDBDBDB, rounded: 16}} }); //input.placeholder = 'Enter your Text...'; input.x = 500; input.y = 300; input.pivot.x = input.width/2; input.pivot.y = input.height/2; this.app.stage.addChild(input); But when I run application it says that Uncaught TypeError: pixi_text_input_1.default is not a constructor
  3. I need tooltip (over Sprite) functionality. Should I try to create my own way of doing this or there already exists something to use (some library or example how to do this)? This is my first project in PIXI... I am using Latest version avaialable on website.
  4. What is the best way to emit events from one sprite and listen them on another sprite or container? 1) I have toolbar with buttons like "delete, resize etc.' . When user clicks on sprites on the screen (a lot of them), I need to emit "Sprite is clicked" and save "Sprite" into event's data. So, toolbar will listen to the event and will know which sprite to be "delete, resize etc.". 2) Second scenario is when user clicks on custom sprite (Background: PIXI.Sprite), I need to change background of another Sprite. I have multiple Background sprites. In this case "Background" click should Emit event. And Sprite will listen and change its background.
  5. Should I consider using PIXI.JS, if I need something like this. Or should I live with pure javascript, maybe something else? - I have background (call it scene) all over the page - I have about 100 images into different categories - images appears on the screen (divided into different categories, use can choose category, images appear) - user is allowed to drop those images on "scene" - user is allowed to modify images (delete, resize, rotate etc.) using toolbox - user can create screenshot - user can write text on scene (using toolbox, choose "text" and create text on scene) It is for children to create, for instance, "forest" with "animals". Or "ocean" with different creatures. Or similar excercises for teachers. Basically that is it. I looked into Pixi.js, I already started creating scene with sprites etc., it works, but I wonder whether this is the right technology to use.
  6. I have about 50 images, I load them into Application. Then I create sprite for each image. Images width and height differs, they are not the same width/height, and images are quite large compared with sprites I need on screen. This is my first App in Pixi.js I am using latest PIXI.jS version. I have defined width (let us say width = 100). I need all sprites to be width = 100, but height should be calculated proportionally based on image (from which texture was created). Is it possible? let mySprite = new PIXI.Sprite(app.loader.resources[imgName].texture); mySprite.anchor.set(0.5, 0.5); mySprite.width = 100; mySprite.height = 100; // instead this should be calculated to fit image proportions I think I do not have problems to do math, but I have problems to get right values against which calculation/proportions should be calculated.
  7. I have now my Phaser game locally. Currently it is just pure html/js (without any webpacks, nodejs and similar staff). However, I think that this is not preferably way. Moreover, I need to extend the webpage by adding login to website functionality and also configs for the game (like user settings, saved game data and similar should be loaded from database, preferably using PHP). There is Apache on server we use. So what could be suggested infrastructure for this? BACKEND. Pure php vs framework? Should I use some PHP framework or live with pure php if I need only features from backend like login / get some user data / some routing things maybe, maybe not. At some point I would need login via Facebook. FRONTEND. Are you using some front end frameworks also in your webpages with games, I mean like vue or similar - or you just write pure html/js by hand? OTHER. Are you using webpack (never used it) to make js files more organised / bundles etc.?
  8. I am very new in Game development ( I am web developer). However, I am helping to develop one very small educational game for kids. The main idea is to have one BASE image as background and be able to drag and drop many smaller images on it. Then download it as image. However, I need such additional features as: 1) allow user to resize images 2) allow user to add text to the BASE background image (one soulution could be - he creates new textbox, adds text there and then dragAndDrops it on the background where he wants). So maybe my question is very general - but which js framework will fit best to aciheve this goal? I started to look at Phaser, but I do not see how to "allow user resize image" there and also "how to allow user to write custom text in dynamically created textboxes".