How do I create a application that is similar to this website ?

0 favourites
From the Asset Store
This is a single chapter about "Decision Science" strategy games from the "Construct Starter Kit Collection" workshop.
  • I have been trying to create an app for personal use to increase reading speed by acquiring the Method of Loci synthesia, More information about which can be found in the link below -

    forum.artofmemory.com/t/is-it-possible-to-gain-the-method-of-loci-synthesia-edit-yes-it-is-see-virtual-memory-palaces-along-with-text/52446/16

    And that synthesis can be acquired by reading objects and backgrounds instead of text but in the website below you read emojis instead of text

    mojilang.ml

    What I want to do is display objects instead of text or emojis that are along with a background under them which I believe can happen by transparent spritesheets but I have been unable to figure out how to display multiple objects in a sprite or spritesheets instead of words,

    Can any one help me with this,

    Cheers.

  • If you need only one image per letter, use a spritefont.

    Or do you want multiple images for each letter? for example, "A" can be either an image of apple, or avocado, or ant etc. This will not be possible with a spritefont, you will have to do it with a sprite.

    Create animations (A, B, C...) for each letter in the sprite. Add several images as frames into each animation. Make sure all images are the same size.

    When you are displaying words, create an instance of the sprite, set animation to required letter, choose a random frame.

  • Well dop2000 is it possible to convert the image below into a Sprite Font and if it is then can you tell me how

    And credit to Liam Hine for this image.

  • It's possible, but will require some manual work. Load this image into an editor like Photoshop, Gimp, Inkscape. Configure a grid, cut each letter out and place them in the grid. Save the result as png and use it in Spritefont object. You will need to set character width/height and possibly configure spacing data.

  • Well,I tried to use the SpriteFont object but I was able to use only one image with the SpriteFont object and because of this reason can you tell me how to use more than one image with the SpriteFont Object so that I can complete that web app which I am hoping to create since my problem of Splitting the images has been solved after which I intend to share it in the Art of Memory Forum after crediting you,

    Cheers.

  • You need more than one image for each letter?

    You can add several spritefonts with different sets of images. Select one at random. But you will not be able to mix letters from different sets in one word.

    If you need truly random letters, you have to do it with a sprite object. See my first comment.

  • Well I need to get only one image per letter displayed and I want this to happen for all the letters of the English Language(I have images for the m and I will pass the text to be displayed to the Sprite Font Object in a Variable)Can you tell me how can this be done,

    Cheers.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I don't understand. If you only have one image for each letter, then simply use a spritefont.

    If you have several different images for each letter (for example apple, avocado, asparagus for letter "A") and you want to choose one of these images at random - then use a sprite.

  • Well dop2000 I have created a project file with 4 Sprites,A Textbox,A Text Object and about 25 animations and I want to get all the sprites to update their text sequently whenever text is typed in the Text Input Box for example

    If someone types "Bowl" then I want the first sprite which is the first to display the animation "B" and the second sprite to display the animation "W" and the fourth sprite to display the animation "L" and all of the animations in my project are alphabetically named,

    And if the length of words typed in the Text Box is greater than 4 then I want the animations to change themselves every second,For example- If someone types the word "Internet" then I want all the four sprites to display the animations "I","N","T","E" respectively and then after one second I want all the Sprites to display the animations "R","N","E","T" respectively so that the word that was types by the user which here is "Internet" is formed and dop2000 I want to share this project in the Art of Memory Forum for showing how a Mind Palace Synthesia App or Method of Loci Synthesia app can work and I will also credit you for your help in its development both in the published web app and in the project,

    And below is the link to this project

    dropbox.com/s/iy0grq75v0z9s0e/Method%20of%20Loci%20Synthesia%28Early%20Version%29.c3p

    and,

    Cheers.

  • Why did you choose the hardest way to do this?

    I mentioned several times in my comments - if you need one image per letter, you should use a spritefont. Instead of 4 different sprites with 25 different animations, all you need is just one spritefont!

    dropbox.com/s/fgie4jf7chomznx/Method%20of%20Loci%20Synthesia%28Early%20Version%29.c3p

  • Well dop2000 I could only use one image with the SpriteFont and I used the Sprite because of this reason which is the hardest way to do this.And for my project to work I really need my project to display objects that look like text and it is because of this I did the hard work of finding an image,cropping it and then upscaling it and removing its background and if my project can display animations(which are alphabetically named) with all the four sprites displaying them for every text entered by the user with a one second delay for them for all the sprites displaying animations to go to the next text until the end of the user submitted text,

    Then this project will be completed.

    and,

    Cheers.

  • Do you or do you not require different images for each letter?

    For example, is this the only image for letter "A", or will there be other images with the same letter "A"?

  • No,I do not require different images for each letter,And that is the only image with the letter "A",

    Cheers.

  • Then Spritefont is the way to go! All you need to do is to re-arrange the letters on the image so they fit into the grid and configure character width and height.

    Here is a very crude example with some random alphabet picture from google.

    dropbox.com/s/fgie4jf7chomznx/Method%20of%20Loci%20Synthesia%28Early%20Version%29.c3p

  • Well dop2000 I tried to add multiple images in the SpriteFont object but I was not able to ans below is the the result is in the link below-

    dropbox.com/s/7hy37bveikgvv5r/Method%20of%20Loci%20Synthesia%28Early%20Version%29v2.c3p

    And below are all the images of the animations in my project-

    Can you arrange them in a SpriteFont and I have the events to complete the rest of the work,

    Have a Great Day.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)